get the element dropped on with jquery sortable

Question

I have a list and some input fields. I want to drag the list item into the input field, and in the update callback, get the target input field - because I want to copy the text of the list item into the value attribute of input field. I also don't want the list item to disappear from its original location. This is what I have done:

<ul id="field_source">
      <li>some text</li>
      <li>some other text</li>
 </ul>

<ul class="designer_row connectRow">
  <li>
    <input type="text" class="connectColumn" /><input type="text" class="connectColumn" />
  </li>
</ul>

$( "#field_source, input" ).sortable({
  connectWith: ".connectColumn",
  forcePlaceholderSize: false,
  helper: function(e,li) {
    copyHelper= li.clone().insertAfter(li);
    return li.clone();
  },
  stop: function(event, ui) {
    copyHelper && copyHelper.remove();
  },
  update: function(event, ui){
    // both ui.item and this are giving me the item dragged, not the element dropped on (the input field)
  }
})

How can I figure out which input field was targeted?

event.target is giving me the #field_source ul element, not the input field. — Daniel Viglione, Sep 02 '15 at 16:20

score 4 · Answer 1 · answered Sep 26 '18 at 10:15

4

The element is actually not dropped "on" another element rather than between:

element.sortable({
    update: function(event, ui) {
        var item = ui.item;
        var target = ui.item.prev();
    }
});

In case of first position "target" does not exist.

answered Sep 26 '18 at 10:15

Tires

1,529
16
27

1

There is also ui.item.next() (empty on the last element). – FrenkyB May 06 '19 at 08:46

score 0 · Accepted Answer · answered Sep 02 '15 at 16:48

You shouldn't be using sortable for what you are trying to do, use instead droppable and draggable

HTML

<ul id="field_source">
    <li><span>some text</span></li>
    <li><span>some other text</span></li>
 </ul>

<input type="text" class="connectColumn" />
<input type="text" class="connectColumn" />

JS

$( ".connectColumn" ).droppable({
    accept: "#field_source li span",
    drop: function( event, ui ) {
       $(event.target).val(ui.draggable.text());
      }
});
$( "#field_source li span" ).draggable({ 
    revert: "valid" 
});

Here is a working Fiddle

I found this post useful too: https://stackoverflow.com/questions/3088485/how-to-revert-position-of-a-jquery-ui-draggable-based-on-condition — Daniel Viglione, Jun 21 '17 at 22:23

get the element dropped on with jquery sortable

2 Answers2