Question

我正在努力将jQuery的拖放功能与jQuery UI排序相结合。我想将HTML列表中的项目（li标签）替换为拖动其他项目（也是li标签）。

所以关于项目，不在列表中!! 它必须放在特定的地方，而不是在列表的末尾添加。 我不想追加它。

我拖动的项目来自另一个可排序的列表。（我不知道这是否重要。）

这是我的代码：

HTML：

<div id="source" class="listBlock">            
    <ul class="Sortable">
        <li class="ui-state-default" id="item1">Item 1</li>
        <li class="ui-state-default" id="item2">Item 2</li>
        <li class="ui-state-default" id="item3">Item 3</li>
        <li class="ui-state-default" id="item4">Item 4</li>
    </ul>
</div>                            

<div id="target" class="listBlock">            
    <ul class="DropTrue">
        <li class="ui-state-default slot" id="slot1">SLOT 1</li>
        <li class="ui-state-default slot" id="slot2">SLOT 2</li>
        <li class="ui-state-default slot" id="slot3">SLOT 3</li>
        <li class="ui-state-default slot" id="slot4">SLOT 4</li>
    </ul>
</div>

Javascript（使用jQuery 1.7.2和jQuery UI 1.8.18）：

$(function() {
        $("ul.Sortable").sortable({
            connectWith: 'ul',
            opacity: 0.6,
        });
    });

你能帮我解决一下，最好是一些示例代码吗？非常感激。

[2014年12月3日编辑]

完整的工作实施：

var maxFieldLength = 30;

$(document).ready(function () {

    $(".detailsBlock").find("tbody").show();
    $(".showDetails").addClass("active");

    InitializeHeaderMap();

    $('#ResetButton').click(function () {
    $('span.headerText img').each(function (index) {
        $(this).click();
    });
    });

    $("ul.SourceList li").draggable({
    opacity: 0.6,
    revert: true
    });

    $("ul.TargetList li").droppable({
    drop: function (event, ui) {
        PlaceInSlot(ui.draggable, $(this));
    }
    });
});

function OnNextClick() {
    CreateHeaderMap();
    return true;
}

function OnPreviousClick() {
    CreateHeaderMap();
    return true;
}

function InitializeHeaderMap() {
    var map = [];
    var headerMap = $('input[name=HeaderMap]').val();

    if ((headerMap !== null) && (headerMap !== undefined) && (headerMap.length > 0)) {
    try {
        map = JSON.parse(headerMap);
    } catch (err) {
        map = '';
    }
    }

    $.each(map, function (key, mapObject) {
    if (mapObject.HeaderIndex != -1) {
        var header = $("ul.SourceList li:icontains(" + mapObject.Header + ")");
        // Only place in slot when the header text is found
        if (header.text().length > 0) {
        var slot = $("ul.TargetList li[id=" + mapObject.Item + "]");
        PlaceInSlot(header, slot);
        }

    }
    });
}

function CreateHeaderMap() {

    var map = [];

    $("li.item").each(function () {

    var obj = {};
    obj['Item'] = $(this).attr('id');
    var position = $(this).find('span.headerText input').val();
    if ((position === 'undefined') || (position === null)) {
        position = -1;
    }
    obj['HeaderIndex'] = position;
    if (position !== 'undefined') {
        obj['Header'] = $(this).children('span.headerText').text().trim();
    } else {
        obj['Header'] = '';
    }

    map.push(obj);
    });

    $('input[name=HeaderMap]').val(JSON.stringify(map));
}

function PlaceInSlot(element, slot) {
    $(slot).children("span.slotText").hide();

    var revertImg = '<img name="image" src="https://dl.dropbox.com/s/z4cehkuhv2mj502/Prullie_1_12.png" width="12" height="12" />';

    $(slot).children("span.headerText").html($(element).html()).append(revertImg);

    $(slot).parent().addClass("ui-state-default");

    $(slot).removeClass("validation-error");

    $(slot).droppable({
    disabled: true
    });

    var importRowFile = $(element).val();

    $(slot).attr("value", importRowFile);

    $(element).hide();

    $(slot).find("span.headerText img").click(function () {
    $(element).show();

    $(slot).children("span.slotText").show();
    $(slot).children("span.headerText").html('');
    $(slot).addClass("slot");
    $(slot).droppable({
        disabled: false
    });
    $(slot).off('click');
    });
}

请参阅小提琴：http://jsfiddle.net/RWCH/9DPCW/

Answer 1

我相信可以通过他们的班级名称，使每个单独的项目“可以删除”，例如： “ui-item-droppable”然后在drop事件中你可以执行交换。

JQuery示例具有它，因此包含项是可放置容器，但没有理由不能将其更改为所有包含的项。

您不会有任何性能损失，因为您只是声明该类是可放置的，而不是目标容器中的每个项目。

通过来自可排序列表<ul> </ul> </li> </ul> </li>的拖动项目<li>替换静态列表<ul>中的项目<li>

1 个答案: