Question

我在div上使用了拖动功能（不是jquery UI，我不想要Jquery UI），但是我有更多div同样的class，如何拦截this div

上的点击

这是我的代码：

$(function(){
    var dragging = false;
    var iX, iY;

    // how can I intercept $(this, ".marker") ??
    $(".marker").mousedown(function(e) {
        dragging = true;
        iX = e.clientX - this.offsetLeft;
        iY = e.clientY - this.offsetTop;
        this.setCapture && this.setCapture();
        return false;
    });
    document.onmousemove = function(e) {
        if (dragging) {
            var e = e || window.event;
            var oX = e.clientX - iX;
            var oY = e.clientY - iY;

           // how can I find the ID related to this div ?
            $('.marker').css({"left":oX + "px", "top":oY + "px"});
            return false;
        }
    };
    $(document).mouseup(function(e) {
        dragging = false;
//      $(".marker")[0].releaseCapture();
        e.cancelBubble = true;
    })
})

这里是原始的codePen https://codepen.io/Jonh/pen/jgyLB

这里创建div的JS，它们是由JS动态创建的

for (i = 0; i < theFeat.length; i++) {
    markerText = theFeat[i].value;
    mk_totalHeight += 50;

$('<div>', { id: 'd' + i, style:"top:" + mk_totalHeight + "px;"}).addClass('marker').appendTo('#map');

$('<div>', { id: i, style:"background-image:url('../../../symbols/marker" + (i + 1) + ".png');" }).addClass('markerIcon').appendTo('#d'+ i);

$('<span>', { id: 's' + i, text: markerText}).appendTo('#d' + i);

} // end for loop

如果你只有一个div它很有用，但我如何在各种div的类上实现它，我必须复制该函数并添加为选择身份证？（允许的最大div为4，因此它将为#d0，#d1，#d2，#d3）

Answer 1

所以你的一个听众，

// how can I intercept $(this, ".marker") ??
  $(".marker").mousedown(function(e) {
    dragging = true;
    iX = e.clientX - this.offsetLeft;
    iY = e.clientY - this.offsetTop;
    this.setCapture && this.setCapture();
    return false;
  });

...实际上，不会像你期望的那样工作。由于.marker元素是动态创建的，因此它们上的事件侦听器将失败。而是，听听最近的父节点：

// Try something like this:
$("#map").on("mousedown", ".marker", function(e){
  // Either of the following should get to the element that 
  //  triggered the mousedown
  var target = $(this);
  // OR YOU CAN USE
  var target = $(e.currentTarget);

  // ... whatever other processing you need...
});

Answer 2

@Snowmonkey的评论之后我注意到问题出现在document.onmousemove你在哪里更改CSS属性，这是我的解决方案。

我创建了一个var来获取所选的div

$(".marker").mousedown(function(e) {
    dragging = true;
    mdiv = $(this);
    iX = e.clientX - this.offsetLeft;
    iY = e.clientY - this.offsetTop;
    this.setCapture && this.setCapture();
    return false;
});

然后在onmousemove函数上，我将目标存储在var上，我可以获得ID

document.onmousemove = function(e) {
    if (dragging) {
        var e = e || window.event;
        var oX = e.clientX - iX;
        var oY = e.clientY - iY;
        $("#" + mdiv.attr('id')).css({"left":oX + "px", "top":oY + "px"});
        return false;
    }
};

Jquery多个div同一个类，只需拖动＆＃34;这个＆＃34; DIV

2 个答案: