12

我有以下代码，它允许运行 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'
    });
});
4

4 回答 4

15

使用 时$(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'
        });
    });
});​
于 2012-09-09T01:36:47.880 回答
1

是的，这是可能的。但是您使用的是 jQuery 选择器（可以选择并返回多个元素），然后立即展开它以返回第一个元素。您可以修改您的代码以在整个过程中使用 jQuery 函数并避免这种情况。

// an array of all elements with class "drag"
// each element is wrapped
var drag = $(".drag");

// selects all matching elements, but then references
// the first raw DOM element in the array
var drag = $(".drag")[0];

另一种看待它的方式：

var matches = $(".drag");

// each() executes a function for each matched element
matches.each(function () {
    var drag = this; // raw dom element

    // or, wrap to get jQuery object
    // var drag = $(this);
});​

正如我所提到的，您还可以在整个代码中使用 jQuery 函数。我看到的两个简单示例是 x/y 坐标计算和事件绑定。

于 2012-09-09T01:36:32.607 回答
0

首先，您通过使用声明您只需要第一个元素[0]。

其次，你应该使用jQuery的on()方法。这是我如何看待你的功能：

var drag = $(".drag");

drag.on("touchmove", function(event) {
    xPos = $(this).offsetWidth / 2;
    yPos = $(this).offsetHeight / 2;

    event.preventDefault(); // preventDefault is IE-specific, is it?  

    $(this).css({
        'left' : event.targetTouches[0].pageX - xPos + 'px', 
        'top' : event.targetTouches[0].pageY - yPos + 'px'
        });
});
于 2012-09-09T01:47:35.410 回答
0

这对于大多数有经验的开发人员来说可能是显而易见的，但对于像我这样在让 jQuery 应用于多个元素时遇到困难的初级开发人员可能会有所帮助。

今天我了解到您必须确保在 div 本身之外加载脚本。

我错误地将脚本加载到第一个元素中，并想知道为什么 jQuery 函数没有应用于页面下方的另一个 div。

屏幕截图显示父 <div> 内的 <script> ^ 我做错了

于 2019-04-07T19:46:22.040 回答