javascript - jqueryを使用して、ある列から別の列にドラッグアンドドロップします

Question

jqueryを使用して、ある列からアイテムをドラッグして別の列にドロップする例が必要です

そのような例はありますか？

Answer 1

jquery sortable でこれを行うことができます: http://jqueryui.com/demos/sortable/#connect-lists

Answer 2

ここでは、ソート可能なjqueryUIを使用して完全なビンを作成しました。私はそれがあなたに役立つはずだと思います。

デモ： http ：//codebins.com/bin/4ldqp9g

HTML：

<div class="demo">
  <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">
      Item 1
    </li>
    <li class="ui-state-default">
      Item 2
    </li>
    <li class="ui-state-default">
      Item 3
    </li>
    <li class="ui-state-default">
      Item 4
    </li>
    <li class="ui-state-default">
      Item 5
    </li>
  </ul>
  <ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">
      Item 1
    </li>
    <li class="ui-state-highlight">
      Item 2
    </li>
    <li class="ui-state-highlight">
      Item 3
    </li>
    <li class="ui-state-highlight">
      Item 4
    </li>
    <li class="ui-state-highlight">
      Item 5
    </li>
  </ul>

</div>
<!-- End demo -->
<div class="demo-description">
  <p>
    Sort items from one list into another and vice versa, by passing a selector
    into the 
    <code>
      connectWith
    </code>
    option. The simplest way to do this is to
    group all related lists with a CSS class, and then pass that class into the
    sortable function (i.e., 
    <code>
      connectWith: '.myclass'
    </code>
    ).
  </p>
</div>

CSS：

#sortable1, #sortable2 
{

  list-style-type: none;

  margin: 0;

  padding: 0 0 2.5em;

  float: left;

  margin-right: 10px;

}
#sortable1 li, #sortable2 li 
{

  margin: 0 5px 5px 5px;

  padding: 5px;

  font-size: 1.2em;

  width: 120px;

  overflow:visible;
  display:block;

}

JQuery：

$(function() {
    var itemclone, idx;
    $("#sortable1, #sortable2").sortable({
        start: function(event, ui) {
            //create clone of current seletected li
            itemclone = $(ui.item).clone();
            //get current li index position in list
            idx = $(ui.item).index();
            //If first li then prepend clone on first position 
            if (idx == 0) {
                itemclone.css('opacity', '0.5');
                $(this).prepend(itemclone);
            }
            //Else Append Clone on its original position
            else {
                itemclone.css('opacity', '0.7');
                $(this).find("li:eq(" + (idx - 1) + ")").after(itemclone);
            }

        },
        change: function(event, ui) {
            //While Change event set clone position as relative
            $(this).find("li:eq(" + idx + ")").css('position', 'relative');

        },
        stop: function() {
            //Once Finish Sort, remove Clone Li from current list
            $(this).find("li:eq(" + idx + ")").remove();
        },
        connectWith: ".connectedSortable"
    }).disableSelection();
});

デモ： http ：//codebins.com/bin/4ldqp9g