Question

我需要能够：

将项目从一个div拖到目标div
一旦它包含在目标div中，使其在目标div的范围内可拖动

将项目拖至目标DIV
在目标div中，使父列表可拖动
但不要使列表项本身可拖动。

我希望每个列表项都可以作为单独的实体进行拖动。

这是我的加价：

   <div id="catalog">
     <div>
       <ul>
         <li>Lolcat Shirt</li>
         <li>Cheezeburger Shirt</li>
         <li>Buckit Shirt</li>
       </ul>
     </div>
 </div>

 <div id="cart">
   <div class="ui-widget-content">
     <ol>
       <li class="placeholder">Add your items here</li>
     </ol>
   </div>
 </div>

这是我的功能：

$( "#catalog li" ).draggable({
    appendTo: "body",
    helper: "clone"
});
$( "#cart ol" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
    }
});
$( "#cart li" ).draggable({
    containment:"document",
    cursor:"move"
});

使用#cart li定位列表项目不起作用 - 没有任何反应。对于任何我可以想到的用于单独定位lis的变体也是如此。谁能告诉我我做错了什么？

编辑：

我现在可以看到发生的事情是通过将项目放入购物车而创建的LI不会获得所需的class = ui-draggable属性。现在我正在寻找一种方法来确保掉线产生的标记来自：

    <li>List item</li>

到此：

    <li class="ui-draggable">List item</li>

以下是生成此内容的行：

 $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );

如何更改它以便LI接收ui-draggable类？

编辑2：

简单地添加类是行不通的，就像我刚刚尝试使用addClass（）一样。仍在寻找解决方案。

Answer 1

这是因为它们是动态添加的内容，您需要为每个动态添加的内容调用draggable

var cartlidragopts = {
    containment:"document",
    cursor:"move"
};

$( "#cart ol" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ).draggable(cartlidragopts);
    }
});
$( "#cart ol li" ).draggable(cartlidragopts);

演示：Fiddle

Answer 2

我需要在Drop函数中创建#cart Draggable，如下所示：

$( "#cart ul" ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  accept: ":not(.ui-sortable-helper)",
  drop: function( event, ui ) {
    $( this ).find( ".placeholder" ).remove();
    $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
    $("#cart li").addClass("ui-draggable");
    $("#cart ul li").draggable({containment:"document", cursor:"move"});
  }
});

JSFiddle：http://jsfiddle.net/Fp25w/4/

可以使OL可拖动而不是子LI

2 个答案: