remove() 不适用于可拖动图像

Question

我在#trash 中有一个 .dropzone div，其中元素被删除时使用 .remove() 删除（使用 jquery ui .droppable 和 .draggable 类）：

$('.dropzone').droppable({
    tolerance: 'pointer',
    accept: 'p',
    drop: function(event, ui){
        ui.draggable.remove();
        $('#trashanim').animate({opacity: '1'}, 'fast')
        $('#trashanim').animate({opacity: '0'}, 'slow');
    }
});

（#trashanim 是一个由 drop 事件触发的垃圾桶的简短动画）。

在我尝试使用 img 之前工作正常：在 .dropzone 上的放置事件之后，图像将自身定位在左上角，丢失道路上的所有类并在其标签中获取该位置的属性（当我用图像进行测试，我确实更改了 ui 类的接受参数以能够接收“img”）。图像不会从其父级中删除。

如this post 所示，我已实施事件委托，但没有结果。

编辑：当我清空（）父节点将另一个元素拖到#trash 时，图像确实从节点中消失。看起来可以删除，但是当从另一个元素调用时。

Answer 1

您说您正在使用img - 所以我假设您正在拖动的元素，它的标签是<img>

话虽如此，您的droppable 设置为只接受<p> 标签。

尝试将接受更改为accept: 'p, img'

Answer 2

请提供您的代码的 jsFiddle，我使用的是 jsfiddle，并且可以添加 jquery UI 库并在 JSFIDDLE 中正常工作。

这里是代码检查一下。

$("img").draggable();

$('#droppable').droppable({
  tolerance: 'pointer',
  accept: 'p, img',
  drop: function(event, ui) {
    ui.draggable.remove();
    $(this).addClass("ui-state-highlight");
    alert("dropped");

  }
});

div {
  min-width: 200px;
  height: 150px;
  border: 1px solid red;
  display: block;
  color: red;
  font-weight: bold;
  margin:20px;
}

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>



<div id="droppable">
  Dropzone
</div>

<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">
<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">
<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">

Answer 3

感谢@Draval 的回答。我终于弄明白了：问题出在元素被拖动的“原点”div上。问题是，div 看起来像这样：

    $(document).ready(function(){
    $('#tabs-1').droppable({
        accept: 'img, p',
        drop: function(event, ui){
            $('#tabs-1').append(ui.draggable);
            ui.draggable.draggable({containment: '#tabs-1'});
        }
    })
});

我需要 div 能够接受来自另一个 div 的元素，这就是我将其设为可放置的原因。这与其中已经存在的元素发生了冲突（我真的不明白为什么）。另外，我正在使用 jquery ui 选项卡，并且没有正确指定要设置可放置的元素（不是('#tabs-1').droppable();，而是$('#tabs).droppable() 你必须小心jquery ui tabs您还指定为包含的元素，以及您将附加ui.draggable 的元素。

为了更清楚起见，我制作了两个单独的函数：一个用于已经在“原点”div 中的元素，另一个用于将附加来自#preview div 的拖动事件的元素：

    $(document).ready(function(){
    $('#tabs').droppable({
        accept: 'img, p',
    })
});

$(document).ready(function(){
    $('#tabs').droppable({
        accept: '#preview img',
        drop: function(event, ui){
            var position = ui.draggable.offset();
            $('#tabs-1').append(ui.draggable);
            ui.draggable.css('position', 'absolute')
            ui.draggable.offset(position);
            ui.draggable.css('zIndex', '1')
            ui.draggable.draggable({containment: '#tabs-1'});
        }
    })
});

我知道我必须创建一个函数来将元素附加到活动选项卡，而不是总是附加到 #tabs-1 选项卡，但现在这解决了我的困惑。

感谢您的意见和回答！