如何在jQuery Draggable的stop事件中定位克隆的拖拽元素？

我来帮你搞定这个问题！你现在遇到的核心困境是在draggable的stop事件里没法直接拿到克隆后的新元素，而且当前代码会批量修改所有列表项。其实我们可以换个思路，利用sortable的receive事件来处理——这个事件会在克隆元素被成功放到目标列表时触发，刚好能精准捕获到新添加的那个元素。

问题分析 #

1. 你在draggable的stop事件里用this，指向的是原始拖拽元素，不是克隆后的新元素；而且setTimeout里的this会绑定到window，所以修改内容的代码根本不会生效。
2. 直接用$("#intro-statements li").css(...)会选中目标列表里的所有li，自然会影响已有的元素。

解决方案 #

我们给目标sortable容器添加receive事件，这个事件里的ui.item就是刚被添加的克隆元素，直接操作它就可以了，完全不会影响其他元素。

下面是修改后的完整代码：

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>

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>

修改后的JavaScript

<script> 
$(function() { 
    // 初始化sortable，添加receive事件捕获新克隆元素
    $("#intro-statements, #assessment-statements").sortable({ 
        placeholder: "ui-state-highlight", 
        revert: true,
        receive: function(event, ui) {
            // ui.item就是刚添加的克隆元素，精准定位！
            var $newItem = $(ui.item);
            // 根据目标容器的ID区分处理逻辑
            if ($(this).attr('id') === 'intro-statements') {
                $newItem.css({"width":"343px","height":"25px"});
                $newItem.html("new content");
            } else if ($(this).attr('id') === 'assessment-statements') {
                $newItem.css({"width":"343px","height":"50px"});
                $newItem.html("new content<br>new line");
            }
        }
    }); 

    // 初始化intro的draggable，优化drag事件的范围
    $( "#intro-clone li" ).draggable({ 
        drag: function() { 
            $(this).css("width","158px"); // 只修改当前拖拽的原始元素
        }, 
        connectToSortable: "#intro-statements", 
        helper: "clone", 
        revert: "invalid" 
    }); 

    // 初始化assessment的draggable，优化drag事件的范围
    $( "#assessment-clone li" ).draggable({ 
        drag: function() { 
            $(this).css("width","158px"); // 只修改当前拖拽的原始元素
        }, 
        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(); 
            intros[i] = $text; 
        }); 
        console.log(intros); 
        $("#show").html(JSON.stringify(intros)); 
    }); 
}); 
</script>

关键改动说明 #

1. 移除了draggable的stop事件：因为这个事件拿不到克隆后的元素，而且容易误操作所有列表项。
2. 给sortable添加receive事件：当克隆元素被放到目标列表时，这个事件会触发，ui.item就是我们要找的新克隆元素，直接操作它即可。
3. 优化了drag事件里的CSS修改：把$("#intro-clone li")改成$(this)，这样只会修改当前正在拖拽的原始元素，不会影响同列表里的其他元素（虽然你这里每个克隆列表只有一个li，但这样写更规范）。

这样修改后，你就能精准定位到新添加的克隆元素，修改它的内容和样式，完全不会影响列表里的其他元素啦！

内容的提问来源于stack exchange，提问作者Steve Weatherill