javascript - 使用jquery从一列拖放到另一列

Question

我需要一个使用 jquery 从一列中拖动项目并将其放入另一列的示例

有没有这样的例子？

Answer 1

您可以使用 jquery 可排序执行此操作：http: //jqueryui.com/demos/sortable/#connect-lists

Answer 2

在这里，我使用 jquery UI sortable 完成了完整的 bins。我认为它应该对你有帮助。

演示： 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;

}

查询：

$(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