将 div 对象标记为已选

Question

这是我的jsfiddle。

我希望能够标记div对象作为选定项。这些对象应该有一个类名为draggable的类（红色圆形）。

此外，选定项可以应用于那些位于具有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");
    });
});

我该怎么做？

- Dinosaurius

---

你正在使用interact.js是一个重要的细节。 - Joshua D. Boyd

Answer 1

由于您正在使用interact.js，因此您应该将此类操作放入interact事件处理程序中。我通过在interact的onmove中添加以下代码行 $(target).addClass("selected"); 来实现我认为您想要的功能：

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/

- Joshua D. Boyd

---

谢谢。看起来很不错。只有一件事。在你的jsfiddle中，当圆形移动到dropzone内时，它会被选中。我想在点击dropzone内的圆形后保持其选中状态。当我点击发送时间时，它应该取消选择。我该怎么做？ - Dinosaurius

我需要类似这样的东西：jsfiddle.net/meeqhud9/6。唯一的问题是选择只应该在“dropzone”内被允许。 - Dinosaurius

Answer 2

您的window.load函数在jsfiddle链接中被覆盖。如果您将$('.draggable').click()监听器放置在docReady函数内，即$(function(){ //code });，它将像预期的那样附加到该事件。此外，将监听器重写为$(document).click('.draggable',function(){ //code });将处理将此事件附加到动态创建的.draggable元素，而将其绑定到现有的.draggable元素上则不会。

- humbolight

---

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