使动态绘制的元素可拖动

making dynamically drawn elements draggable

本文关键字：拖动 元素 动态 绘制      更新时间：2023-09-26

我有下面的代码使一个元素可拖动!

$('.item').draggable({
        revert : true,
        zIndex: 1,
        containment: "window"
    });

代码写在

里面
jQuery(window).ready(function(){})

这些item元素是动态淹没的，所以当页面加载一次时，这些item是不可拖动的!但当我刷新页面时，它就可以拖拽了。我如何使元素可拖动的第一次页面加载。

更新:

是我用来动态绘制元素的函数。

function populateUIItems(majorGroupId){
    var uiElement = $('.item').first();
    $('#item-list-section').empty();
    ajaxCall("/getItemByMajorGroup?mGroup=Beverage","GET",null,function(response){
        for(var i = 0; i < response.itemModel.length; i++){
            var clone = uiElement.clone();
            clone.children('.item-price').empty();
            clone.children('.item-price').append("<h4>" + response.itemModel[i].sellingPrice + "</h4>");
            clone.children('.item-name').empty();
            clone.children('.item-name').append("<h4>" + response.itemModel[i].description + "</h4>");
            clone.attr('id',response.itemModel[i].itemId);
            clone.css('background-image', "url(../images/item_bg.jpg)");
            $('#item-list-section').append(clone);
        }
    });
}

正如我在评论中提到的，您需要为动态添加的元素调用小部件。

function populateUIItems(majorGroupId){
    var uiElement = $('.item').first();
    $('#item-list-section').empty();
    ajaxCall("/getItemByMajorGroup?mGroup=Beverage","GET",null,function(response){
        for(var i = 0; i < response.itemModel.length; i++){
            var clone = uiElement.clone();
            clone.children('.item-price').empty();
            clone.children('.item-price').append("<h4>" + response.itemModel[i].sellingPrice + "</h4>");
            clone.children('.item-name').empty();
            clone.children('.item-name').append("<h4>" + response.itemModel[i].description + "</h4>");
            clone.attr('id',response.itemModel[i].itemId);
            clone.css('background-image', "url(../images/item_bg.jpg)");
            clone.appendTo('#item-list-section').draggable({
                revert : true,
                zIndex: 1,
                containment: "window"
            });
        }
    });
}
相关文章：