Question

我使用jquery可排序脚本（拖放）

我有两个问题：

如何获取拖动项ID？
在下垂项目后，我想运行ajax，将新项目插入我的数据库，并获得项目顺序（从上到下），以便我可以保存他们的订单。如何获取数组中的项目ID列表？

Jquery脚本

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
        $( ".dropZone" ).sortable({
            revert: true,
            stop: function (event, ui) {
                var basketID = event.target.id;
                itemID = ??? 

                alert ("itemID: " + itemID + " go to basketID: " + basketID);

            }
        });

        $( ".attrac" ).draggable({
            connectToSortable: ".dropZone",
            helper: "clone",
            revert: "invalid"
        });

    } );

</script>

我的HTML

<div class="col-md-5 row mt20">

    <div class="panel panel-info attrac ui-widget-content" id="item3" >
        <div class="panel-heading">The Tower</div>
        <div class="panel-body">most well-known national heritage sites</div>
    </div>

    <div class="panel panel-info attrac ui-widget-content" id="item4" >
        <div class="panel-heading">Masada</div>
        <div class="panel-body">This Herodian fortification o</div>
    </div>

</div>

<div class="row"></div>

<div class="col-md-5 dropZone" id="basket1" >

</div>

<div class="col-md-5 dropZone" id="basket2"  >

</div>

Answer 1

如何获取拖动项ID？

一种方法是在内容小部件上设置一个包装器，如

<div class="panel panel-info attrac" >
        <div class = "panel-content" id ="item3">
        <div class="panel-heading">The Tower</div>
        <div class="panel-body">most well-known national heritage sites</div></div>
</div>
...
var itemID = $(ui.item).find('.panel-content').attr('id');

如何获取通过AJAX存储的itemID？

var itemIDs = [];

$('.dropZone .panel-content').each(function(id, el) {                                                                        
      itemIDs.push($(el).attr('id'));
})

请检查这个小提琴是否完整实施：https://jsfiddle.net/yeshas93/pk47nygx/19/

警告以下实现使用jQuery。每次删除项目时，它也会直接访问DOM。请将此视为学习机会。除非您的应用程序仅依赖于jQuery，否则不应在生产中使用它。我建议尝试使用React DND（https://github.com/react-dnd/react-dnd）来完成同样的工作。

Answer 2

你可以这样做：https://codepen.io/creativedev/pen/gKXBre

由于需要获取父ID，您无法直接进入 ui 或事件，但您可以获取类，因此请添加相同的类并获取ID。

$(function() {
    $(".dropZone").sortable({
        revert: true,
        stop: function(event, ui) {
            var basketID = event.target.id;
            var cls = $(ui.item).attr('class').split(" ");
            var matches = $(cls)
                .filter(function(i, s) {
                    return (s.indexOf('attrac') !== -1) ? s : '';
                });
            itemID = $('.' + matches[0]).attr('id');

            alert("itemID: " + itemID + " go to basketID: " + basketID);

        }
    });

    $("div[class*='attrac']").draggable({
        connectToSortable: ".dropZone",
        helper: "clone",
        revert: "invalid"
    });

});

Answer 3

您可以利用jQuery UIs已经可用的事件和方法进行排序：

receive：一旦您的sortable从连接的draggable收到一个项目，就会触发。 ui参数包含拖动的元素。

serialize：将序列化所有可排序的项目ID。注意：我添加了一个数据属性，因为draggable元素中的ID不会被复制到sortable。

$(".dropZone").sortable({
  revert: true,
  receive: function(event, ui) {
    var basketID = event.target.id;
    var itemID = ui.item[0].id;

    //console.log("itemID: " + itemID + " go to basketID: " + basketID);

    var data = $(this).sortable('serialize', {
      attribute: "data-id"
    });
    //console.log(data);
    //do ajax call with data
  },
  update: function(event, ui) {
    var basketID = event.target.id;
    var itemID = ui.item.data('id');
    var data = $(this).sortable('serialize', {
      attribute: "data-id"
    });
    data = data + '&basketID=' + basketID;
    console.log("itemID: " + itemID + " go to basketID: " + basketID);
    console.log(data);
    $.post("url/to/serverside", function(data) {
      //result callback
    });
  }
});

$(".attrac").draggable({
  connectToSortable: ".dropZone",
  helper: "clone",
  revert: "invalid"
});

<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="col-md-5 row mt20">

  <div class="panel panel-info attrac ui-widget-content" id="item3" data-id="item_3">
    <div class="panel-heading">The Tower</div>
    <div class="panel-body">most well-known national heritage sites</div>
  </div>

  <div class="panel panel-info attrac ui-widget-content" id="item4" data-id="item_4">
    <div class="panel-heading">Masada</div>
    <div class="panel-body">This Herodian fortification o</div>
  </div>

</div>

<div class="row"></div>

<div class="col-md-5 dropZone" id="basket1">
  drop here
</div>

<div class="col-md-5 dropZone" id="basket2">
  drop here
</div>

jquery可排序脚本 - 获取拖动项ID

3 个答案: