2

我正在努力结合 jQuery UI 可排序的 jQuery 拖放功能。我想用拖动的另一个项目（也是一个 li 标签）替换 HTML 列表中的一个项目（ 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/

4

1 回答 1

0

I believe one could make each of the individual items "droppable", by their class name, e.g. "ui-item-droppable" and then on the drop event you can perform the swap then.

The JQuery example has it so the containing item is the droppable container, but there is no reason why you can't change that to be all the contained items.

You won't have any performance hit because you are only stating that the class is droppable, not each and every item in the target container.

于 2012-11-03T07:52:10.703 回答