2

こんにちは、要素をドラッグアンドドロップする必要がある関数があります。ここに私のコードがあります:

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

どんな助けでも大歓迎です

4

2 に答える 2

0

まず、コードのインデントを修正してください。

あなたのコードにはいくつかの間違いがあります:

  1. var i = 0; グローバル変数であるべきだと思います。$(document).ready(function() {})したがって、ブロックの外に置いてください。

  2. クリックすると 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);
    }
  });
}
于 2012-10-29T06:26:55.220 に答える