CODEWITHSUNDEEP
jqueryjquery-ui-sortable
Daniel Viglione
Daniel Viglione

Reputation: 9407

get the element dropped on with jquery sortable

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?

Upvotes: 2

Views: 3975

Answers (2)

Tires
Tires

Reputation: 1602

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.

Upvotes: 4

Alvaro Fla&#241;o Larrondo
Alvaro Fla&#241;o Larrondo

Reputation: 5734

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

Upvotes: 0

Related Questions