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

Posted 2023-03-11

【中文标题】将静态列表 <ul> 中的项目 <li> 替换为来自可排序列表 <ul> 的拖动项目 <li>

【英文标题】：Replace an item <li> in a static list <ul> by a dragged item <li> coming from a sortable list <ul>

【发布时间】：2012-10-20 00:40:52

【问题描述】：

我正在努力使用 jQuery 的拖放功能以及 jQuery UI 可排序。我想用拖动的另一个项目（也是一个 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"   />';

    $(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/

【参考方案1】：

我相信可以通过它们的类名使每个单独的项目“可放置”，例如"ui-item-droppable" 然后在 drop 事件上你可以执行交换。

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

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