javascript - 将 div 对象标记为选中

Question

This is my jsfiddle.

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

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

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

JavaScript:

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

我该怎么做？

Answer 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;

然后还有 onend 处理程序:

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

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