Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="http://jsfiddle.net/margaret_/XM6f8/1/" rel="nofollow">http://jsfiddle.net/margaret_/XM6f8/1/</a></p> <p>Is this what you are looking for? Are you okay with using knockout? I can't add comments 'cause I don't have 50 reputation.</p> <pre><code>&lt;a href="#" data-bind="text: name, click: function() { viewModel.selectTask($data); }, visible: $data !== viewModel.selectedTask()"&gt;&lt;/a&gt; &lt;input data-bind="value: name, visibleAndSelect: $data === viewModel.selectedTask(), event: { blur: function() { viewModel.selectTask(''); } }" /&gt; </code></pre> <p>Use parent and previous location to mimic the function.</p> <pre><code>ko.bindingHandlers.sortableList = { init: function(element, valueAccessor, allBindingsAccessor, context) { $(element).data("sortList", valueAccessor()); //attach meta-data $(element).sortable({ start: function(event, ui) { //track the original position of the element var parent = ui.item.parent(); var prev = ui.item.prev(); //create a function to move it back (if it has a prev sibling, insert after it, otherwise put it at the beginning) ui.item.moveItemBack = prev.length ? function() { ui.item.insertAfter(prev); } : function() { parent.prepend(ui.item); }; }, update: function(event, ui) { var item = ui.item.data("sortItem"); if (item) { //identify parents var originalParent = ui.item.data("parentList"); var newParent = ui.item.parent().data("sortList"); //figure out its new position var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]); if (position &gt;= 0) { //move the element back to its original position and let KO handle adding it to the new parent if (originalParent !== newParent) { ui.item.moveItemBack(); } //place item in the proper position newParent.remove(item); newParent.splice(position, 0, item); } } }, connectWith: '.container' }); } </code></pre> <p>Do you want the divs to appear side by side?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload