Javascript 如何使元素在可拖动元素中可单击？

我正在使用jqueryui开发一个拖放生成器。我想做的是，当我将鼠标悬停在任何可拖动的元素上时，会出现一个十字，单击该十字后，需要删除该元素。 以下是创建可拖动元素的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;
});

但是Click事件不起作用，因为只要我单击它，可拖动元素就会触发它自己的事件

---

如何使此交叉单击成为可能？

您遇到了与此处相同的问题：

这应该起作用：

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

---

这是一个工作代码

这是工作代码：

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

---

我确信有一个更简单的方法，但我的第一个想法是：在对象的

上（基本上是当你让鼠标点击时）找出它是否移动了（获取以前的坐标，获取新的坐标）。如果它没有移动，请将其拆下。这不起作用。实际上，您添加的示例链接是关于使draggable元素的父元素可单击。但在我的例子中，我想使子元素可单击。@user3130733确定。我为你创造了一个新的世界。过来看。成功了，成功了，谢谢。请添加一个答案，以便我可以接受。
$(".draggable i.remove-elem").off('click').on("click", function(){
        $(this).parent('.draggable').remove();
});