jquery sortable 脚本 - 获取拖动项 ID

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'));
})

请检查此 fiddle 以了解完整实施：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

由于需要获取parent id，不能直接在ui或者event中获取但是可以获取class 所以添加相同的 class 并获取 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 可排序 UI 的已有事件和方法：

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

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

$(".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 sortable 脚本 - 获取拖动项 ID

jquery sortable script - get drag item id

jquery

draggable

jquery-ui-sortable