jQuery动态拖动

jQuery dynamically drag

本文关键字：拖动 动态 jQuery      更新时间：2023-09-26

我在拖放方面遇到了一些问题。如果我把静态场。。。它运行良好，但如果我动态创建，则draggable不起作用。

jQuery

$(function() {
    $( "#drag_item #data li").draggable({
        helper: "clone"
    });
    $( "#drag_item ol" ).droppable({
        drop: function( event, ui ) {
            $( this ).find( ".placeholder" ).remove();
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});

静态html

<div id="drag_item">
    <ul id="data">
        <li>A</li>
    </ul>
</div>

Dinamically

function create_item() {
    for (var a = 0; a < data_array.length; a++) {
        $( "<li></li>" ).text('Data'+a).appendTo($('#data'));
    }
});

有线索吗？

每次更改节点时，都需要apply.dragable。例如：

function create_item() {
    for (var a = 0; a < data_array.length; a++) {
        $( "<li></li>" ).text('Data'+a).appendTo($('#data'));
    }
    $("#data").draggable("destroy");
    $( "#drag_item #data li").draggable({
        helper: "clone"
    });
});
相关文章：