如何使元素在可拖动元素内可点击？

问题描述：

我正在使用JQuery UI拖动& Drop Builder。我想要做的是，当我将鼠标悬停在任何可拖拽元素上时，会出现一个十字，并在点击该十字时，该元素需要被移除。这里是我的jQuery代码来创建可拖动元素：如何使元素在可拖动元素内可点击？

var postfix = '<i class="fa fa-times"></i>'; 
$(".buildbutton").click(function() { 
    var id = this.id; 
    if (id === 'label') { 
     var elemHtml = '<div class="draggable"><label contenteditable="true" class="draggable" id="label' + labelCount + '">Text</label> ' + postfix + '</div>'; 
     $("#canvas").append(elemHtml); 
     label++; 
    } 
    $(function() { 
     $(".draggable").draggable({containment: "#canvas"}).resizable(); 
    }); 
    return false; 
});

jQuery代码绑定一个移除事件：

$(".draggable").on("click", "i", function(){ 
    alert("going to remove this element"); 
});

但Click事件不工作的拖拽能力要素是每当我点击它时触发它自己的事件。

如何让这个十字可以点击。

我确定有一个更简单的方法，但我的第一个想法是：在对象的“放下”（基本上当你l等你的鼠标点击去）找出它是否已经移动（获得先前的坐标，获得新的坐标）。如果它没有移动，请将其移除 – ntgCleaner

答

你有相同的问题在这里：jQuery .on('click') does not work with jQuery UI draggable

这应该工作：

$(".draggable i").on("click", function(){ 
    alert("going to remove this element"); 
});

这里是一个工作jsFiddle

这不起作用。实际上你添加的示例链接是关于使可拖动元素的父元素可点击的。**但是在我的情况下，我想让一个子元素可点击。 – akifquddus

@ user3130733好的。我为你创建了一个[Fiddle]（https://jsfiddle.net/p8dg76LL/1/）。一探究竟。有用。 –

它的工作，谢谢。请添加一个答案，以便我可以接受。 – akifquddus

答

这是工作代码：

$(".draggable i.remove-elem").off('click').on("click", function(){ 
     $(this).parent('.draggable').remove(); 
});

如何使元素在可拖动元素内可点击？

相关推荐