Question

我有这个网站，这是一个可拖动的链接网格。拖动时会出现一个下拉列表，用户可以将其拖动到可拖动的垃圾箱中。

问题是，当他们将它放在droppble上时，链接会打开！哪个不应该发生。我试过添加

ui.draggable.find('a').removeAttr('href')

到我的handleDropEvent函数，但它没有帮助。

任何javascript天才都需要关注一下？

编辑我还尝试添加：

ui.draggable.find('a').click(function(e) { e.preventDefault();

如下所示：

$('.draggable').draggable({ start: function( event, ui ) {$('#dropdownAddTile').slideDown();ui.draggable.find('a').click(function(e) { e.preventDefault(); });},  stop: function() {$('#dropdownAddTile').slideUp();}, containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});

另一个编辑

我应该指出（只是想通了）我将draggable类应用于这样的href：

<a href class="draggable">

所以到目前为止，解决方案已经导致了我们删除链接的问题，并且它阻止了可拖动的拖拽！还有另一种方式吗？

Answer 1

拖动它们时，设置一个单击处理程序以阻止默认操作，如下所示：

ui.draggable.find('a').click(function(e) { e.preventDefault(); });

正如我所说的那样，当它们被拖动时执行它，以防在掉线事件中执行它时为时已晚。

<强>更新

$('.draggable').draggable({ 
  start: function( event, ui ) {
    $('#dropdownAddTile').slideDown();
    ui.draggable.find('a').click(function(e) { 
      e.preventDefault(); 
    });
  },  
  stop: function() {
    $('#dropdownAddTile').slideUp();
  }, 
  containment: '#container', 
  snap:'.droppable', 
  snapMode:'inner', 
  revert:'invalid',
  snapTolerance: 32
});

所以你可以致电ui.draggable.find('a').click(function(e) { e.preventDefault();

Answer 2

尝试将onclick设置为返回false;

Answer 3

Chrome，Firefox或IE10中没有出现此问题，但确实发生在IE9及更低版本中。

我的建议是在活动上运行preventDefault。使用您的代码，

function handleDropEvent( event, ui ) {
    event.preventDefault();
    var draggable = ui.draggable;
    var droppable = $(this);
    var droppableId = $(this).attr("id");
    var draggableId = ui.draggable.attr("id");
    $('.draggable').draggable({containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
    $('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
    var initPosit = ui.draggable.parent().attr('id');

    $.post("tiles/updateTilePosition", { draggableId:draggableId, droppableId: droppableId }).done(function(data) {

    })
    $(this).addClass('occupied');
    ui.draggable.parent().removeClass('occupied');
    if($(ui.draggable).parent() !==$(this)){
        $(ui.draggable).appendTo($( this ));
    }
}

此外，如果你查看你的源代码，一切都是编码的（撇号，引号等）不确定是怎么发生的，但我会解决这个问题。

Answer 4

如果我理解正确，您只是希望链接不能被拖动正确？这样做：

"use Ppppp\\\\Ppppp;"

基本上，这是您禁用拖动功能idk的原因，为什么每个人为此编写这么长的代码。...

删除<a href=""> from a draggable when being dragged - jquery</a>

4 个答案: