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是一个由掉落事件触发的垃圾箱的简短动画）。

工作正常，直到我尝试使用img：在.dropzone上的drop事件之后，图像将自己置于左上角，丢失道路中的所有类并在其标记中获取该位置的属性（当我测试了图像，我确实更改了ui类的accept参数，以便能够重现＆＃39; img＆＃39;）。图像不会从其父图像中删除。

我已经实现了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标签，并没有正确指定我想要设置droppable的元素（它不是('#tabs-1').droppable();，而只是$('#tabs).droppable()你必须要小心您指定为包含的jquery ui tabs元素，以及要追加ui.draggable的元素。

为了更清晰，我创建了两个独立的函数：一个用于已经位于'origin'div中的元素，另一个用于将附加来自#preview div的拖动事件的函数：< / p>

    $(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标签，但是现在这解决了我的困惑。

感谢您的意见和答案！

remove（）不适用于可拖动图像

3 个答案: