javascript - 将 jQuery 事件应用于所有类元素？

Question

我有以下代码，允许运行 iOS 的用户移动 <div>同类.drag在页面上左右。当存在一个 .drag 时，这很好用, 但当它有两个实例时无法工作。是否可以让代码找到所有 <div>的，然后允许它们可拖动？

var drag = $(".drag")[0];
    xPos = drag.offsetWidth / 2;
    yPos = drag.offsetHeight / 2;
    drag.addEventListener("touchmove", function() {
        event.preventDefault();
        $(this).css({
        'left' : event.targetTouches[0].pageX - xPos + 'px', 
        'top' : event.targetTouches[0].pageY - yPos + 'px'
    });
});

Answer 1

当您使用 $(selector)[0] 时，您将获得与选择器匹配的第一个 DOM 元素。使用 .each() 代替将事件监听器添加到匹配选择器的所有元素:

$(".drag").each(function () {
    var drag = this;
    xPos = drag.offsetWidth / 2;
    yPos = drag.offsetHeight / 2;
    drag.addEventListener("touchmove", function() {
        event.preventDefault();
        $(this).css({
          'left' : event.targetTouches[0].pageX - xPos + 'px', 
          'top' : event.targetTouches[0].pageY - yPos + 'px'
        });
    });
});​