移除<从一个可拖动的时候被拖动- jquery

remove <a href> from a draggable when being dragged - jquery

本文关键字：拖动 jquery 一个 移除      更新时间：2023-09-26

我有这个网站，这是一个可拖动链接的网格。当拖拽时，会出现一个下拉框，用户可以通过拖拽来删除可拖拽对象。

问题是，当他们把它放在水滴上时，链接打开了!这是不应该发生的。我试过添加

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

所以到目前为止的解决方案已经导致了这个问题，我们删除了链接，它停止了可拖拽!还有别的办法吗?

当它们被拖动时，设置一个click处理程序来防止默认操作，如下所示:

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();

这个问题在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 ));
    }
}

另外，如果你查看源代码，所有内容都是编码的(撇号，引号等)不确定这是怎么发生的，但我会修复它。

尝试将onclick设置为返回false;

如果我理解正确的话，你只是想要一个链接不能拖动，对吗?这样做:

<a href="#test" draggable="false">Test</a>

这基本上是如何禁用拖动功能idk为什么每个人都写这么长的代码....

相关文章：