make Sortable items selectable?
Reported by rom1_p | April 4th, 2011 @ 11:32 PM
Currently in the examples (as well as in my own tests), the Sortable items cannot be selected.
My use case is to combine in-place-edit and selectable.
This is as close to a test case as I can get:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Listed - courses</title>
<link href='/css/simple.css' rel='stylesheet' type='text/css'/>
<link href='/css/sortable.css' rel='stylesheet' type='text/css'/>
<script src="/js/right.js"></script>
<script src="/js/right-sortable.js"></script>
<script src="/js/right-in-edit.js"></script>
<h1>courses</h1>
<img id="spinner" src="/images/spinner.gif" style="position: absolute; display: none;"></img>
<ul class='sortable' data-sortable='{itemCss:"li.item", handleCss: "span.handle", url: "http://localhost:9292/items/%{id}", Xhr: {spinner: "spinner"}}'>
<li class='item' id='88'>
<span id='item88'>chocolat (p.ex. lindt extra fondant)</span>
<div class='item_ops'>
<span class='status'>
[new]
</span>
<a href="#" onclick="$('item88').inEdit({url: "http://localhost:9292/items/88", Xhr: {spinner: "spinner"}}); return false;">Edit</a>
<span class='delete'>
<form action="/items/88/delete" method="post">
<input type="submit" value="Delete">
</form>
</span>
<span class='handle'>≡</span>
</div>
</li>
<li class='item' id='83'>
<span id='item83'>fondue au chocolat</span>
<div class='item_ops'>
<span class='status'>
[new]
</span>
<a href="#" onclick="$('item83').inEdit({url: "http://localhost:9292/items/83", Xhr: {spinner: "spinner"}}); return false;">Edit</a>
<span class='delete'>
<form action="/items/83/delete" method="post">
<input type="submit" value="Delete">
</form>
</span>
<span class='handle'>≡</span>
</div>
</li>
<li class='item' id='87'>
<span id='item87'>chocolat de cuisine</span>
<div class='item_ops'>
<span class='status'>
[new]
</span>
<a href="#" onclick="$('item87').inEdit({url: "http://localhost:9292/items/87", Xhr: {spinner: "spinner"}}); return false;">Edit</a>
<span class='delete'>
<form action="/items/87/delete" method="post">
<input type="submit" value="Delete">
</form>
</span>
<span class='handle'>≡</span>
</div>
</li>
</table>
<form action="/items/create" method="post">
<div><input type="text" name="text" size="40"></input></div>
<div><input type="submit" value="Add item"></div>
<div><input type="hidden" name="parent_list" value="18"></input></div>
</form>
<p><a href="http://localhost:9292/lists">My lists</a></p>
<hr />
<p><a href="http://localhost:9292/">Home</a></p>
<p><a href="http://localhost:9292/">Log out</a></p>
Comments and changes to this ticket
-
MadRabbit April 5th, 2011 @ 02:07 PM
- State changed from “new” to “resolved”
checked the issue, it seems that creating a generic solution will be problematic because people might build all sorts of constructions for that purpose, plus lists can be interchangeable and we don't know all the items upfront.
luckily the fix is fairly simple
ul.my-sortable { user-select: text; -moz-user-select: text; -webkit-user-select: text; } ul.my-sortable div.handle { user-select: none; -moz-user-select: none; -webkit-user-select: none; }you just get that
user-selectstyle back for the whole list and disable it for the handle element -
-
Please Sign in or create a free account to add a new ticket.
With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.
Create new ticket
Create your profile
Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป
RightJS Core Tickets
MadRabbit
rom1_p