Question

我有一个可滚动的ul

<ul class="col1" id="MyID" name="MyName"> 
    <li draggable="true"  class="li-object draggable" value="@item.Id"></li>
    <li draggable="true"  class="li-object draggable" value="@item.Id"></li>
</ul>

我希望能够从左侧列表中选择一个元素并将其放在ul之外的某个位置，

<ul id="floor" dropzone="copy">DROP HERE</ul>

然而，当我在li之外拖动ul时，它不可见（当我将其放在黄色区域时也不可见） - 请参阅JSFiddle https://jsfiddle.net/vehmt5x9/1/。

我做错了什么？

Answer 1

对于遇到此问题的其他人，我使用helper选项解决了问题：

$(".draggable").draggable({
    appendTo: 'body',
    revert: 'invalid',
    helper: function() {
        //drag selected items
        var selected = $(this);
        var container = $('<div/>');
        container.append(selected.clone());
        return container;
     },
    stop: function () {
        $(this).draggable('option', 'revert', 'invalid');
    }
});

$( "#droppable" ).droppable({
  classes: {
    "ui-droppable-active": "ui-state-active",
    "ui-droppable-hover": "ui-state-hover"
  },
  drop: function( event, ui ) {
    $( this )
        .find( '.li-object' ).replaceWith($(ui.helper.children()))
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
});

更新了JSFiddle：https://jsfiddle.net/vehmt5x9/6/

在ul之外拖动li不可见

1 个答案: