Javascript 拖拉不起作用？

大家好，我有一个函数，我必须在其中拖放元素。这是我的代码：

$(document).ready(function() {

    var i = 0;
    $("button[id='columnadd']").click(function () {
        alert(1);
            var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
            i++;
            $(this).after(domElement);
    });

        $(".small_box li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
});

$('#shoppingCart ol').droppable({
    accept: '.small_box li',
    drop: function (event, ui) {
        alert(1);
        $(this).find(".placeholder").remove();
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }
});

$（文档）.ready（函数（）{
var i=0；
$（“按钮[id='columnadd']）。单击（函数（）{
警报（1）；
变量domeElement=$（'

我应该可以在这里顺便看看您的物品

在这里添加您的物品

var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');

var-domElement=$（“在此处添加菜单项”
在此处添加您的项”
）；

---

非常感谢您的帮助

首先，请修复代码缩进

您的代码中有一些错误：

var i=0；

我认为它应该是一个全局变量，所以把它放在

$（document.ready（function（）{}）

块之外

单击即可创建DOM元素（即拖放区域），在单击触发器之前，该元素不会出现在页面中。通过执行

$（'#shoppingCart ol'）。可拖放（{…}）

中的

$（document）.ready（function（）{}）

block您试图将

droppable

添加到一个甚至不在页面中的元素，因此这不会起作用

您应该做的是在创建该元素并将其放在页面上之后，使该元素可拖放。下面是一个示例：

$("button[id='columnadd']").click(function () {
  // create the element
  var domElement = $('<aside id="shoppingCart' + i++ + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');

  // put it after $(this)
  $(this).after(domElement);
  // at this point you have domElement in your page

  // make it droppable
  domElement.find("ol").droppable({
    // put options here
    greedy: true,
    drop: function (event, ui) {
      makeItDroppableToo(event, ui, this);
    }
  });
});

$（“按钮[id='columnadd']）。单击（函数（）{
//创建元素
var domElement=$（“在此处添加菜单项”
在此处添加您的项”
）；
//把它放在$后面（这个）
$（this）.在（domElement）之后；
//此时，您的页面中有DomeElement
//让它可以放下
DOMELENT.find（“ol”）.可拖放({
//把期权放在这里
贪婪：没错，
drop：函数（事件、用户界面）{
makeItDroppableToo（事件、ui、this）；
}
});
});

这是一个函数，它可以让你删除的元素有自己的占位符

function makeItDroppableToo(e, ui, obj) {
  $(obj).find(".placeholder").remove();

  var placeholder = $("<ol><li class='placeholder'>You can also drop it here</li></ol>");
  $("<li></li>").append(ui.draggable.text()).append(placeholder).appendTo($(obj));

  // this is the same as the previous one
  placeholder.droppable({
    // put options here
    greedy: true,
    drop: function (event, ui) {
      makeItDroppableToo(event, ui, this);
    }
  });
}

函数makeItDroppableToo（e、ui、obj）{
$（obj）.find（“.placeholder”）.remove（）；
var placeholder=$（“
您也可以将其放在此处”
”；
$（“
”）.append（ui.draggable.text（））.append（占位符）.appendTo（$（obj））；
//这与前一个相同
占位符.可拖放({
//把期权放在这里
贪婪：没错，
drop：函数（事件、用户界面）{
makeItDroppableToo（事件、ui、this）；
}
});
}

试试这把小提琴，我在和JQueryUI一起工作

---

})

谢谢，它现在可以工作了……如果我想在已经删除的元素中添加子项，我该怎么做……你能帮我吗？我已经更新了我的答案。它的原则基本相同。创建它>将它放在页面上>添加一些行为（事件）感谢您的回复。但是当我添加子项时，子项也会被添加，并且同样的子项也会作为主元素被删除。使用

greedy:true

on droppable选项。它会触发第一个droppable，而不会将其事件共享给其父项。我已经对其进行了测试，我认为这将回答您的问题：）…如何将删除的元素作为可拖动元素

function makeItDroppableToo(e, ui, obj) {
  $(obj).find(".placeholder").remove();

  var placeholder = $("<ol><li class='placeholder'>You can also drop it here</li></ol>");
  $("<li></li>").append(ui.draggable.text()).append(placeholder).appendTo($(obj));

  // this is the same as the previous one
  placeholder.droppable({
    // put options here
    greedy: true,
    drop: function (event, ui) {
      makeItDroppableToo(event, ui, this);
    }
  });
}

  $(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
});