jQueryUI - ソースボックスから2つの宛先ボックスにドラッグする方法、移動したアイテムのIDと宛先ボックスのIDを取得する

jQueryUI draggable/droppable/sortableを使用しようとしていますへ移動ソースボックスを宛先ボックスのいずれかに移動します。これは、ユーザがアイテムを必要なボックスにソートできるようにするためです。jQueryUI - ソースボックスから2つの宛先ボックスにドラッグする方法、移動したアイテムのIDと宛先ボックスのIDを取得する

彼らが戻ってサーバーにページをPOSTするときそして、それは彼らの選択を保存し、どのようなボックス彼らがにアイテムを置きます。だから、あるアイテムがボックスのうちの一つのに「落とし込まれた」とき、私は何とか落とされたアイテムのIDとそれに入れられたボックスのIDを取得する必要があります。私はアレイ/オブジェクトにこれを保存します。
ユーザーがアイテムをドロップ可能なボックス内で注文できますが、重要ではない場合は便利です。私はそれらをのようにうまく並べるにはがどのように順序付けられていないリストが仮定されているようにする必要があります。現時点では、項目は宛先ボックス内のどこにでもドロップするので、すべての項目は宛先ボックス内のすべての場所に配置されます。
もしユーザーが気を変えたら、ソースボックスにアイテムを戻すことができるはずです
私は以下のコードのシェルを持っていますが、動作しません。移動したアイテムのIDまたは宛先IDを取得しているようです。私は新しいHTML5データ属性を使用しようとしていましたが、何も出てこないようです。私のサイトはHTML5なので、これらの新しいテクニックを使うことができます。

更新：が働いて手に入れた - 下記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から：

コールバックでは、$（この）ドロップ可能を表し、ドラッグ可能なアイテムがドロップされます。 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とデータ属性が表示されます。 Larry Davidが "[かなり良い]（http://www.youtube.com/watch?v=Rp4pJ-mEmE4#t=1m19s）"と言うように。 – zuallauz

うれしかった！：o） –

jQueryUI - ソースボックスから2つの宛先ボックスにドラッグする方法、移動したアイテムのIDと宛先ボックスのIDを取得する

答えて

関連する問題