jquery - 将静态列表 中的项目 替换为来自可排序列表 的拖动项目

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

参见 fiddle :http://jsfiddle.net/RWCH/9DPCW/

Answer 1

我相信可以通过类名使每个单独的项目“可删除”，例如“ui-item-droppable”，然后在放置事件中您可以执行交换。

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

您不会对性能造成任何影响，因为您只是声明该类是可删除的，而不是目标容器中的每个项目。