Question

我有一个包含2个元素的页面：

具有可拖动方法的项目列表
丢失了可排序方法的项目

我只允许从列表1拖到列表2，这似乎工作正常。

现在，我正在寻找的是当我将项目从列表1拖到列表2时，新创建的元素将包含一些不同的html，然后是拖动的元素。那可能吗？

我试过这种方法，但这似乎不适合这项工作：

    $("#list_2").sortable({
        placeholder: "ui-state-highlight",
        cursor: "move",
        delay: 150,
        forcePlaceholderSize: true,
        opacity: 0.5,
        scrollSpeed: 40,
        receive: function( event, ui ) {
            ui.item.html(ui.item.find(".hide").html());
}
});
        $("#list_1").disableSelection();
        $(".draggable").draggable({
        connectToSortable: "#template_parts",
        helper: "clone",
        revert: "invalid",
        stop: function( event, ui ) {
    }
            });

任何帮助都应该得到很大的帮助

Answer 1

var received = false;
$(function() {
    $( ".draggable" ).draggable({
        connectToSortable: "#list_2"
    });
    $( "#list_2" ).sortable({
        receive: function(event,ui){
            received = true;
        },
        stop: function(event,ui){
            if(received){ 
                ui.item.css('color','blue');
                ui.item.html(ui.item.html()+' changed');
                received = false;
            }
        }
   });
   $( "#list_2" ).disableSelection();
});

实施例

http://jsfiddle.net/jd8A7/4/

jquery ui sortable修改html创建

1 个答案: