将 div 对象标记为选中答案

【问题标题】：Mark div objects as selected将 div 对象标记为选中
【发布时间】：2017-06-01 04:32:48
【问题描述】：

我希望能够将div 对象标记为选中。这些对象应该有一个类draggable（红色圆圈）。

此外，选择可以应用于 div 区域内具有 dropzone 类的那些圆圈。

div.draggable.selected {
    border:4px solid black;
    -moz-border-radius:3px;
    border-radius:3px;
}

JavaScript：

$(window).load(function(){
    $(".draggable").click(function () {
        $(this).toggleClass("selected");
    });
});

我该怎么做？

【问题讨论】：

您正在使用interact.js 是一个重要的细节。

标签： javascript jquery html css interact.js

【解决方案1】：

因为您使用的是interact.js，所以您应该将此类类操作放入您的交互事件句柄中。通过将$(target).addClass("selected"); 添加到交互onmove 中，我能够完成我认为您想要的操作，如下所示：

onmove: function(event) {
  var target = event.target;
  $(target).addClass("selected");
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;

然后也到onendhandler：

$(event.target).removeClass("selected");

有关完整的工作示例，请参见此处：http://jsfiddle.net/weubd2yg/

【讨论】：

谢谢。看起来很好。就一件事。在你的 jsfiddle 中，当它在 dropzone 内移动时，它会被选中。我想在 dropzone 内单击它后保持选中的圆圈。当我单击发送时间时，它应该未选中。我该怎么做？
我需要这样的东西：jsfiddle.net/meeqhud9/6。唯一的问题是，选择应该只允许在dropzone内部。

【解决方案2】：

您的 window.load 函数正在您的 jsfiddle 链接中被覆盖。如果您将$('.draggable').click() 侦听器放置在 docReady 函数 $(function(){ //code }); 中，那么它将按预期附加到该事件。

另外，将侦听器重写为$(document).click('.draggable',function(){ //code }); 将处理将此事件附加到动态创建的 .draggable 元素，而不会在页面加载时将其绑定到现有的 .draggable 元素。

【讨论】：

我听从了你的建议：jsfiddle.net/meeqhud9/6 但是现在我应该点击两次才能选择一个对象。如果我这样做$(document).click('.draggable',function(){ //code });，那么它根本不起作用。