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

Stack Overflow用户

提问于 2016-06-06 22:18:43

回答 3查看 201关注 0票数 0

我在# .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上的drop事件之后，图像将自己定位在左上角，丢失道路中的所有类，并在其标记中获取该位置的属性(当我使用图像进行测试时，我确实更改了ui类的accept参数以能够接收“img”)。该映像不会从其父映像中删除。

我已经实现了事件委派，如this post中所示，但没有结果。

编辑:当我清空()时，父节点将另一个元素拖到#trash中，图像就会从该节点中消失。它看起来可以删除，但当从另一个元素调用时。

jquery-ui

javascript

jquery

回答 3

Stack Overflow用户

发布于 2016-06-06 22:31:17

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

也就是说，您的droppable被设置为只接受<p>标记。

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

票数 0

Stack Overflow用户

发布于 2016-06-07 10:42:30

请提供您的代码的JSFIDDLE，我曾与jsFiddle和jquery UI库可以添加和工作良好。

这是代码，请检查它。

$("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">

票数 0

Stack Overflow用户

发布于 2016-06-07 18:39:56

感谢你的回答@Draval。我终于弄明白了:问题出在'origin‘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的元素。

为了更清楚起见，我创建了两个独立的函数:一个用于‘原始’目录中已经存在的元素，另一个用于将要附加来自#preview目录的拖动事件的元素：

    $(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'});
        }
    })
});