Question

大家好我有一个功能，我必须在这里拖放元素是我的代码：

$(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);
    }
});

这是我的HTML：

    <aside class="small_box">
    <h4>BRANDS</h4>
    <ul>
        <li id ="brand1"><a class="" href="#">Brand1</a></li>
        <li id ="brand2"><a href="#">Brand2</a></li>
        <li id ="brand3"><a href="#">Brand3</a></li>
        <li id ="brand4"><a href="#">Brand4</a></li>
     </ul>
    </aside>

我应该能够进入这个地方<li class="placeholder">Add your items here</li>

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>');

非常感谢任何帮助

Answer 1

首先，请修复代码缩进。

您的代码存在一些错误：

var i = 0; 我认为它应该是一个全局变量。所以把它放在$(document).ready(function() {})区块之外;
您在单击时创建DOM元素（放置区域），在您单击触发器之前，此元素不在您的页面中。通过在$('#shoppingCart ol').droppable({...})阻止中执行$(document).ready(function() {})，您尝试将droppable添加到甚至不在您网页中的元素中，因此这不会做任何事情。

您应该做的是在之后创建元素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); } }); });

这是使被删除元素具有自己的占位符
的函数
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); } }); }

Answer 2

尝试这个小提琴，我正在使用JQueryUI

http://jsfiddle.net/ashpriom/yHLGP/

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

}）;

可拖动不起作用？

2 个答案: