Html 5 Drag n Drop Ajax

Html 5 Drag n Drop Ajax

本文关键字：Drop Ajax Drag Html      更新时间：2023-09-26

我正在尝试处理Ajax Dom Elements Loaded上的dragstart事件，但不起作用。以下是我如何处理Dragstart事件以获取正在移动的元素的ID：

  $(document).on(".dragItem", "dragstart", function (ev) {
        ev.originalEvent.dataTransfer.setData("text", ev.target.id);
    });

对于页面上加载的任何元素，Dragstart都由上面的代码处理。

但是，当我稍后在代码中使用JS创建Htmldiv时，Event没有响应。

<div class="dragItem" draggable='true'>My Drag Item </div>

事实上，我通过jqueryAjax接收JSON数据，然后用创建的HTML更新DOM。

我能够解决我的问题。使用格式化为HTML的JSON数据更新DOM后，我创建一个指向新插入元素的jquery对象，然后重新应用dragstart事件处理。

$("#cellphonestock").html(total);
var d = $("#cellphonestock .dragItem");
            d.on( "dragstart", function (ev) {
                ev.originalEvent.dataTransfer.setData("text", ev.target.id);
            });
相关文章：