Как получить доступ к идентификатору перетаскиваемого элемента, который сбрасывается в сортируемый - PullRequest
Новая
       12

Как получить доступ к идентификатору перетаскиваемого элемента, который сбрасывается в сортируемый

16 голосов
/ 19 марта 2009

Я использую библиотеки JQuery для реализации перетаскивания.

Как мне получить элемент, который перетаскивается, когда он помещается в сортируемый список?

Я хочу получить идентификатор перетаскиваемого div. Перетаскивается следующий элемент: 

<div class="control" id="control[1]" >
  <img src="img/controls/textfield.png" />
</div>

У меня есть стандартная функция перетаскивания из их примера 

$(".control").draggable({
  connectToSortable: '#sortable',
  helper: 'clone'
});

остановка функции в области перетаскивания со следующим кодом, возвращающим правильное значение 

stop: function(event, ui) {
  alert(ui.helper.attr('id'));
}

И это сортируемый элемент: 

<ul id="sortable"><li>test</li></ul>

и его функция: 

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    // here i need to get draggable element id
  }
});

Я пробовал различные ui.id и т. Д., Которые, похоже, не работают. 

receive: function(event, ui) { 
  $(ui.draggable).attr("id")
}

бросков undefined.

Обновление

Извините, я виноват :) Как говорила моя мама - "Читай API, прежде чем кодировать". ui.item.attr('id') отлично работает.

Ответы [ 9 ]

25 голосов
/ 19 марта 2009

Попробуйте 

receive: function(event, ui) { 
  $(ui.item).attr("id")
}

Согласно документации, прием (в действительности все обратные вызовы для сортируемого) получают два аргумента. Второй аргумент должен содержать:

  • ui.helper - текущий помощник элемент (чаще всего клон пункт)
  • ui.position - текущая позиция помощник
  • ui.offset - текущая абсолютная позиция помощника
  • ui.item - текущий перетаскиваемый элемент
  • ui.placeholder - заполнитель (если Вы определили один)
  • ui.sender - сортируемый где товар приходит (существует только если вы перейти от одного связанного списка к другой)
8 голосов
/ 18 августа 2010

Кажется, что context ui.item изменяется между событием beforeStop и receive

В моем случае я пытаюсь установить идентификатор элемента на сгенерированное значение и 

receive: function (event, ui) { ui.item.attr("id", "control" + currentControlId++);}

у меня не работает

Так что вы можете обойти это: 

beforeStop: function (event, ui) { itemContext = ui.item.context;},
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);}
2 голосов
/ 01 апреля 2009

У меня была похожая проблема, и у меня были проблемы с доступом к вспомогательному элементу в событии start. В итоге я установил атрибут helper для функции, которая возвращала некоторый пользовательский HTML. Я смог получить доступ к этому HTML в стартовом событии без каких-либо проблем. 

helper: function() {
    return '<div id="myHelper">This is my custom helper.</div>';
}
1 голос
/ 19 мая 2012

Мне удалось использовать событие beforeStop для сортировки.

С здесь

beforeStop : Это событие вызывается, когда сортировка прекращается, но когда заполнитель / помощник по-прежнему доступен. 

$( "#something" ).sortable({
  beforeStop: function(event, ui) {
     //you should check if ui.item is indeed the one you want!
     item_id = $(ui.item).attr('id');
     $(ui.item).html('I'm changing the dropped element in the sortable!');
  }
});
1 голос
/ 08 апреля 2011

Да, это проблема, когда вы смешиваете сортируемые, перетаскиваемые и т.д. Сделайте сортируемый контейнер как капельницу: 

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    // here i need to get draggable element id
  }
});

$('#sortable').droppable({
    accept: '.control',
    drop: function(e, ui){
        var your_draggable_element = $(ui.draggable);
        var your_helper = $(ui.helper);
    }
});

это должно работать

1 голос
/ 19 марта 2009

Из перетаскиваемых документов jQuery UI:

Если вы хотите не просто перетащить, а перетаскивание, см. пользовательский интерфейс jQuery Плагин Droppable, который обеспечивает сбросить цель для перетаскиваемых предметов.

См. http://docs.jquery.com/UI/API/1.7/Droppable

0 голосов
/ 14 мая 2014 
$( "#sortable1" ).sortable({
  connectWith: ".connectedSortable",
  cancel: ".disabledItem",
  items: "li:not(.disabledItem)",
  receive: function(event,ui){

  **var page = ui.item.attr('value');**

  var user = $("#select_users").val();
0 голосов
/ 13 сентября 2012

Вы можете использовать пользовательский атрибут данных для хранения идентификатора перетаскиваемых объектов. Этот атрибут все еще присутствует в выпадающих предметах. Исходный код следующий: 

<div class="..." data-id="item_id">
    ...
</div>

Использование $('dropped item").data('id') в сортируемом для получения идентификатора как: 

$("#sortable").sortable({
  ...,
  receive: function(e, ui) { 
      var id = ui.item.data('id');
  }
});
0 голосов
/ 20 января 2010

Кажется немного хакерским - но все получилось! Я должен использовать $ ('. Dragrow1 li: last')

...