Question

如果我有更多元素，我如何跟踪拖放事件，例如我有4个div

<div data-val="val-1">Menu 1</div>
<div data-val="val-2">Menu 2</div>
<div data-val="val-3">Menu 3</div>
<div data-val="val-4">Menu 4</div>

我有8个列表项

<ul>
    <li id="something-1">Something 1</li>
    <li id="something-2">Something 2</li>
    <li id="something-3">Something 3</li>
    <li id="something-4">Something 4</li>
    <li id="something-5">Something 5</li>
    <li id="something-6">Something 6</li>
    <li id="something-7">Something 7</li>
    <li id="something-8">Something 8</li>
</ul>

如果我将ID为li的{{1}}拖到包含something-3的div中，如何将其发布到应发布两个值的文件中。

Answer 1

使用jquery UI函数sortable和一些ajax：

<强>的Javascript

$(function() {
  $( "ul" ).sortable({
    connectWith: ".connected",
    receive: function(event, elem) {
        var menu = $(this).data('val');
        var item = $(elem.item[0]).attr('id');
        $.post('yourphp.php', { item: item, menu: menu }, function () {
        console.log('Menu configuration saved !');
        });
    }
  }).disableSelection();
});

<强> HTML

<h1>Menu 1</h1>
<ul class="connected" data-val="menu-1">
    <li id="something-1">Something 1</li>
    <li id="something-2">Something 2</li>
    <li id="something-3">Something 3</li>
    <li id="something-4">Something 4</li>
    <li id="something-5">Something 5</li>
</ul>
<h1>Menu 2</h1>
<ul class="connected" data-val="menu-2">
    <li id="something-6">Something 6</li>
    <li id="something-7">Something 7</li>
</ul>
<h1>Menu 3</h1>
<ul class="connected" data-val="menu-3">
    <li id="something-8">Something 8</li>
</ul>

JSFiddle

按属性触发拖放事件

1 个答案: