人々はリストの特定の場所にLIをドラッグ＆ドロップできるようにするにはどうすればよいですか？ （console.logの問題）

Question

私は2つの問題に直面しています。そのうちの1つは目標であり、その1つはconsole.log（）呼び出しから情報を取得できません。最初の目標で

見てみましょう：

は、私が働いているプロジェクトのためhttps://jsfiddle.net/L7sbhzzj/でJSfiddleを持っています。私が働いているコードは次のとおりです。基本的に

jQuery('.collection').droppable(
    { 
    'accept': '.collection > li', 
    'drop': function(e, ui) 
     { 
     console.log('Reached here!'); 
     console.log(this); 
     jQuery('#selection').append(ui.draggable); 
     } 
    }); 

、私は人々が、リスト上の特定の位置に要素をドラッグ＆ドロップできるようにしたいです。だから、JSfiddleでは、 "Fiction"を右にドラッグすることができますが、それを行い、 "Nonfiction"の上にドラッグすると、 "Nonfiction"は最後に追加されます。その後、「ノンフィクション」を「フィクション」の上と前にドラッグすることはできません。

私はこのことに刷新を避けたいと思います。 「LIは、ページの上部までの距離が最も小さいターゲットULのLIの直前にドロップされますが、ドロップされたLIのページの上部までの距離と同じかそれ以上です」などの標準的なパターンがあると思います。

jQuery('#selection').append(ui.draggable);のいずれかが動作しているか、他の何かが同等の作業を行っていますが、私のconsole.log（）のいずれも報告されていないようです。

私は何かを実装する方法についていくつかのアイデアを持っていますが、私は物事を取り組んでいる間に、introspectしてconsole.log（）の診断出力を取得するとよいでしょう。

'drop'はまったく有効ですか？それは別の方法で働いていますか？オブジェクトがどの要素にドロップされたのかなど、どのように取得できますか？

--EDIT--

私は私が何をしたいの片側を求めたのだということに気づきました。私は人々があるコンテナから別のコンテナにアイテムXYZを持ち帰り、その後彼らの心が変わったら元に戻すことができるようにしたい。 Snowmonkeyのソリューションは、適切なリストがソート可能であるように美しく機能しました。ただし、以下の適応に失敗し、私は互換性のない2つの機能強化と呼ばれるかもしれないので：

jQuery(function() 
{ 
jQuery('#selection').sortable(
    { 
    }); 
jQuery('li', jQuery('#source')).draggable(
    { 
    'connectToSortable': '#selection', 
    'cancel': 'a.ui-icon', 
    'revert': 'invalid', 
    'containment': 'document', 
    'cursor': 'move' 
    }); 
jQuery('#source').sortable(
    { 
    }); 
jQuery('li', jQuery('#selection')).draggable(
    { 
    'connectToSortable': '#selection', 
    'cancel': 'a.ui-icon', 
    'revert': 'invalid', 
    'containment': 'document', 
    'cursor': 'move' 
    }); 

をどのように私はSnowmonkeyの答えの完全両面バリエーションを得ることができますか？

ありがとう、

Answer 1

だから、ドラッグ可能なものをソート可能なものに接続したいですか？ここに簡単な方法があります。完全に駆除可能なものを取り除き、単に「connectToSortable」ルールをドラッグ可能なものに追加してください。したがって、＃selectionはソート可能なままであり、＃sourceはdraggableのままで、＃sourceの任意の位置にドロップできます。

jQuery(function() { 
 

 
    $(".collection").sortable({ 
 
    }); 
 
    
 
    jQuery('li', jQuery('.collection')).draggable({ 
 
    'connectToSortable': '.collection', 
 
    'cancel': 'a.ui-icon', 
 
    'revert': 'invalid', 
 
    'containment': 'document', 
 
    'cursor': 'move' 
 
    }); 
 
});

body { 
 
    background-color: #ccc; 
 
    font-family: Verdana, Georgia; 
 
} 
 

 
div.main { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 440px; 
 
} 
 

 
div.table { 
 
    display: table; 
 
    width: 440px; 
 
} 
 

 
div.td { 
 
    display: table-cell; 
 
    width: 50%; 
 
} 
 

 
div.tr { 
 
    display: table-row; 
 
} 
 

 
ul.collection { 
 
    background-color: white; 
 
    list-style: none; 
 
    padding-left: 0; 
 
    min-height: 100px; 
 
    padding-left: 0; 
 
    width: 200px; 
 
} 
 

 
ul.collection > li {} 
 

 
ul#selection { 
 
    float: right; 
 
} 
 

 
ul#source { 
 
    float: left; 
 
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="main"> 
 
    <div class="table"> 
 
    <div class="tr"> 
 
     <div class="td"> 
 
     <ul id="source" class="collection"> 
 
      <li>Everything</li> 
 
      <li>Nonfiction</li> 
 
      <li>Fiction</li> 
 
      <li>Poetry</li> 
 
     </ul> 
 
     </div> 
 
     <div class="td"> 
 
     <ul id="selection" class="collection"> 
 
      <li>Empty</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

ので、私はそれが両方の方向に動作させるために上記のポストを更新しました。 2つの要素にIDを使用するのではなく、共通のクラスを使用しました。両方の.collection要素はソート可能で、両方ともconnectToSortable .collection要素です。それが役に立てば幸い！

Answer 2

jquery ui sortableを使用して、必要なものを達成できます。アイテムが選択に追加されたときにいつでも通知を受けたい場合は、受信イベントを待機することができます。

jQuery(function() 
{ 
jQuery("#source").sortable({ 
    connectWith: "#selection", 
}).disableSelection(); 

jQuery("#selection").sortable({ 
    receive: function() { 
    console.log("changed"); 
    } 
}) 
});