jQueryUI - как перетащить из исходного поля в два поля назначения, затем получить идентификатор перемещенного элемента и идентификатор поля назначения

Я пытаюсь использовать jQueryUI draggable/droppable/sortable to Переместить (не копировать) предметы из исходный код в любой из полей назначения. Это значит, что пользователь может сортировать элементы в нужные поля.jQueryUI - как перетащить из исходного поля в два поля назначения, затем получить идентификатор перемещенного элемента и идентификатор поля назначения

Затем, когда они POST страницы обратно на сервер, он сохранит свой выбор и что ящика они положили детали в. Поэтому, когда элемент «упал» в один из ящиков, мне нужно как-то получить идентификатор упавшего предмета и идентификатор коробки, в которую он был помещен. Я сохраню это в массиве/объекте позже.
Было бы удобно, если бы пользователь мог заказать элементов в раскрывающихся боксах, но не критично. Мне нужны они , чтобы выстроиться в линию красиво автоматически, хотя вроде как неупорядоченный список предположительно для работы. На данный момент элементы просто опускаются в любом месте в поле назначения , поэтому все элементы находятся повсюду внутри поля назначения.
Если пользователь передумал, они должны будут перенести элемент из поля назначения в исходное поле
У меня есть оболочка кода внизу, но это не работает, и я могу " t, похоже, получает идентификаторы перемещенного элемента или идентификатора адресата. Я пытался использовать новые атрибуты данных HTML5, но, похоже, ничего не получил. Мой сайт - HTML5, поэтому можно использовать эти новые методы.

Update: Понял работает - полное решение по JSfiddle и ниже:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Source + Double Destination Demo</title> 
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> 
    <script src="../../jquery-1.7.1.js"></script> 
    <script src="../../ui/jquery.ui.core.js"></script> 
    <script src="../../ui/jquery.ui.widget.js"></script> 
    <script src="../../ui/jquery.ui.mouse.js"></script> 
    <script src="../../ui/jquery.ui.draggable.js"></script> 
    <script src="../../ui/jquery.ui.droppable.js"></script> 
    <script src="../../ui/jquery.ui.sortable.js"></script> 
    <link rel="stylesheet" href="../demos.css"> 
    <style> 
     h1 { padding: .2em; margin: 0; } 
     #destinationA, #destinationB { width: 200px; float: left; } 

     /* style the list to maximize the droppable hitarea */ 
     #destinationA ol, #destinationB ol, #source ul { margin: 0; padding: 1em 0 1em 3em; background-color: #f7f7f7; } 
    </style> 

    <script> 
    $(function() 
    { 
     $("#source li").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#destinationA ol, #destinationB ol, #source ul").droppable(
     { 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function(event, ui) 
      { 
       // Get id of the item that was moved 
       var itemIdMoved = ui.draggable.data('item-id'); 
       var itemName = ui.draggable.data('item-name'); 

       // Get id of the current destination (the item is dropped into the ul tag so we need to go up a level to get the div id) 
       var destinationId = $(this).parent().attr('id'); 

       // Move the draggable into the destination box (actually moves the original li element including data attributes) 
       ui.draggable.appendTo(this); 

       // Debug 
       console.log('item ' + itemName + ' (id: ' + itemIdMoved + ') dropped into ' + destinationId); 
      } 
     }).sortable(
     { 
      sort: function() 
      { 
       // gets added unintentionally by droppable interacting with sortable 
       // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options 
       $(this).removeClass("ui-state-default"); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <h1 class="ui-widget-header">Source</h1>  
    <div id="source"> 
     <ul> 
      <li data-item-id="1" data-item-name="One">Item 1</li> 
      <li data-item-id="2" data-item-name="Two">Item 2</li> 
      <li data-item-id="3" data-item-name="Three">Item 3</li> 
      <li data-item-id="4" data-item-name="Four">Item 4</li> 
     </ul> 
    </div> 

    <div id="destinationA"> 
     <h1 class="ui-widget-header">Destination A</h1> 
     <ol> 

     </ol> 
    </div> 

    <div id="destinationB"> 
     <h1 class="ui-widget-header">Destination B</h1> 
     <ol> 

     </ol> 
    </div> 
</body> 
</html>

источник

2012-02-14 zuallauz

Из documentation:

В обратном вызове $ (это) представляет Droppable перетаскиваемый падающий. ui.draggable представляет перетаскиваемый.

Так я думаю, вы могли бы просто сделать:

$('#destinationA ul, #destinationB ul').droppable(
{ 
    drop: function(event, ui) 
    { 
     // Get id of the item that was moved 
     var idMoved = $(this).data('itemid'); 
     console.log(idMoved); 

     // How to get the destination ID that the item was dropped to? 
     var idDropped = this.id; 
     console.log(idDropped); // "destinationA" or "destinationB" 
    } 
})

источник

2012-02-14 10:24:47

Удивительный мат, большое спасибо! Я получил его работу, [проверьте это] (http://jsfiddle.net/zuallauz/U9YHw/). Вы можете перетащить на любой пункт назначения или обратно в исходный код, и он покажет вам атрибут destinationId и атрибуты данных перемещенного элемента. Как сказал Ларри Дэвид: «[довольно хорошо] (http://www.youtube.com/watch?v=Rp4pJ-mEmE4#t=1m19s)». – zuallauz

Рад, что это помогло! : О) –

jQueryUI - как перетащить из исходного поля в два поля назначения, затем получить идентификатор перемещенного элемента и идентификатор поля назначения

ответ

Смежные вопросы