在“停止”事件期间如何定位克隆的可拖动元素？

Posted 2023-05-08

【中文标题】在“停止”事件期间如何定位克隆的可拖动元素？

【英文标题】：How do you target a cloned draggable element during the 'stop' event?

【发布时间】：2018-06-26 07:44:50

【问题描述】：

我有一个可拖动的列表元素，它在拖动时克隆并填充另一个列表。当我删除项目时，我想更改新删除的 li 元素的内容。 我遇到的问题是jQuery的 this 仍然是原始拖动项而不是克隆项。

如何专门针对新克隆的项目，以便我可以更改其内容而不影响列表中的其他项目？

代码如下。感谢您的智慧！

CSS：

<style>
#intro-clone, #assessment-clone 
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 180px;
    display: inline-block;

#intro-statements, #assessment-statements 
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 365px;

#intro-clone li, #assessment-clone li, #intro-statements li, #assessment-statements li 
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    min-height: 25px;

#intro-clone li, #assessment-clone li, #intro-statements li, #assessment-statements li 
    min-height: 25px;
    line-height: 1.2em;

.ui-state-highlight 
    min-height: 25px;
    line-height: 1.2em;

ul 
    padding: 6px 1px 1px 0 !important;
    min-height: 42px;
    background: silver;
    border-radius: 3px;

</style>

JS：

<script>
$(function() 
    $("#intro-statements, #assessment-statements").sortable(
        placeholder: "ui-state-highlight",
        revert: true
    );
    $( "#intro-clone li" ).draggable(
        drag: function()  $("#intro-clone li").css("width","158px"); ,
        stop: function() 
            $("#intro-statements li").css("width":"343px","height":"25px"); // this is applied to ALL the li elements, including the cloned one
            console.log(this); // reference's the original drag element, not the clone
            window.setTimeout(function()  $(this).html("new content") , 1000); // doesn't work!
        ,
        connectToSortable: "#intro-statements",
        helper: "clone",
        revert: "invalid"
    );
    $( "#assessment-clone li" ).draggable(
        drag: function()  $("#assessment-clone li").css("width","158px"); ,
        stop: function() 
            $("#assessment-statements li").css("width":"343px","height":"50px").html("new content<br>new line");  // this is applied to ALL the li elements, including the cloned one
        ,
        connectToSortable: "#assessment-statements",
        helper: "clone",
        revert: "invalid",
    );
    $("#intro-statements, #assessment-statements").disableSelection();

    $("#show").click(function() 
        var intros = ;
        $('li', 'ul.sort').each(function(i) 
            var $li = $(this);
            var $text = $li.text();
            var name = $li[0].tagName.toLowerCase();
            //intros[name + '-' + i] = $text;
            intros[i] = $text;
        );
        console.log(intros);
        $("#show").html(JSON.stringify(intros));
    );
);
</script>

HTML：

<ul id="intro-clone">
    <li class="ui-state-default">Intro item</li>
</ul>
<ul id="assessment-clone">
    <li class="ui-state-default">Assessment item</li>
</ul>
<br>
<br>
<ul id="intro-statements" class="sort">
</ul>
<br>
<ul id="assessment-statements" class="sort">
</ul>
<div id="show">SHOW</div>

【参考方案1】：

您如何花费大量时间寻找解决方案，然后当您发帖寻求帮助时，它就来找您了！

所以这对我有用： 我在 drag 事件的元素上附加了一个类。 当新元素被删除时，我从源元素中删除该类并将该类定位在新克隆的元素上，并对它进行更改。 最后，我从克隆元素中删除该类以保持其唯一性。

这是更新后的js：

$( "#intro-clone li" ).draggable(
    drag: function() 
        $("#intro-clone li").css("width","158px").addClass("new"); // add the new class
    ,
    stop: function() 
        $("#intro-clone li").removeClass("new"); // remove it again
        $("#intro-statements li.new").css("width":"343px","height":"25px");
        window.setTimeout(function()  $("#intro-statements li.new").html("new content") , 1000); // make my changes to the cloned element
        window.setTimeout(function()  $("#intro-statements li").removeClass("new") , 1500); // remove class so it is unique for the next clone
    ,
    connectToSortable: "#intro-statements",
    helper: "clone",
    revert: "invalid"
);

这可能是好代码，也可能不是，但它解决了我的问题，所以我很高兴 :)

【参考方案2】：

您需要将stop 添加到sortable 方法，如下所示，因为sortable 将draggable 和droppable 组合在一起。我认为这对你更好。

$("#intro-statements, #assessment-statements").sortable(
    placeholder: "ui-state-highlight",
    revert: true,
    stop: function(event, ui) 
        console.log(event.target);
    
);