0

こんにちは私が提示するすべての私はメニュービルダーで働いています、そこでユーザーは彼がサブエムヌスで好きなように彼のメニューを構築することができます、私はドラッグアンドドロップに問題があります、私はドラッグアンドドロップまでやりましたが、私の場合はドロップが機能しません

私はこのようなことを達成する必要があります

http://www.prodevtips.com/demos/drag_drop_tree/

似ていませんが、ドラッグアンドドロップでチェーンまたはツリーを作成できるはずです。私のシナリオでは、すべてのメニューを下部に表示し、上部に列ボタンを追加します。ユーザーがメニューを作成する場合は、[メニューの追加]ボタンをクリックします。そこに列が開き、リストされたメニューからメニューをドラッグアンドドロップできます。ここから、上記のリンクの作業シナリオが必要です。メニュー項目をドロップすると、その親メニュー項目の子になります。ユーザーが立ち寄った

これが私のスクリプトです

$(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"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
       i++;
       $(this).after(domElement);
    });

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

$(".small_box li a").droppable({
   tolerance        : "pointer",
   hoverClass        : "tree_hover",
   drop            : function(event, ui){
       var dropped = ui.draggable;
       dropped.css({top: 0, left: 0});
       var me = $(this).parent();
       if(me == dropped)
           return;
       var subbranch = $(me).children("ul");
       if(subbranch.size() == 0) {
           me.find("a").after("<ul></ul>");
           subbranch = me.find("ul");
       }
       var oldParent = dropped.parent();
       subbranch.eq(0).append(dropped);
       var oldBranches = $("li", oldParent);
       if (oldBranches.size() == 0) { $(oldParent).remove(); }
   }
});

これが私のhtmlです

<body>    
 <button id="columnadd" >Add Column</button>
 <aside class="menu-structer" id="AddColumns" >
  </aside>
 <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>
 <aside class="small_box">
    <h4>CATEGORIES</h4>
    <ul>
    <li id ="category1"><a href="#">Category1</a></li>
    <li id="category2"><a href="#">Category2</a></li>
    <li id="category3"><a href="#">Category3</a></li>
    <li id="category4"><a href="#">Category4</a></li>
  </ul>
 </aside>
 <aside class="small_box">
    <h4>PRODUCTS</h4>
    <ul>
    <li id="Product1"><a href="#">Product1</a></li>
    <li id="product2"><a href="#">Product2</a></li>
    <li id="product3"><a href="#">Product3</a></li>
    <li id="product4"><a href="#">Product4</a></li>
  </ul>
 </aside>
</body>

誰かがここで私を助けてくれますか...それは私にとって大きな助けになるでしょう..私はドロップイベントに苦労しています

4

1 に答える 1

0

私がした間違い

クリック時に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-30T06:00:24.250 に答える