Question

我希望能够将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");
    });
});

我该怎么做？

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/

Answer 2

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

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

将div对象标记为已选中

2 个答案: