Question

大家好，我是Javascript和Jquery的新手。首先，我有一个带有id的图像，即＃imag_4，我将此保留在函数imageDrag（）内的click函数中。当我点击图像时，我将图像传递给dragMe（）函数并在那里我申请pageX和pageY。我得到了pagex和pagey的值，但是当鼠标移动时图像没有移动......下面是代码

function imageDrag(){
   var imageDragged = null;

   $('.flexslider .slides #listid_4 #imag_4').on('click', function (e) {
      event.stopPropagation();
      if (imageDragged === null) {
         imageDragged = $(this);
            console.log(imageDragged);
         drag(imageDragged);
      }
   });
}

我知道我们有Jquery UI的可拖动功能，我不想使用那种方法。下面是我的dragMe函数..

function dragMe(imageDragged) {
   $(this).on('mousemove', function (e) {  
      imageDragged.css({
         left: e.pageX,
         top: e.pageY
      });
   });
}

Answer 1

首先，您正在调用drag函数，而您定义了dragMe函数。

其次，当您点击鼠标按钮，即鼠标按下然后鼠标释放时，将调用jquery click。您应该使用'mousedown'事件来捕获此拖动开始事件。

最后一件事是：你应该处理mouserelease事件以停止拖动元素。

Here已修改＆amp;简化为span元素示例

如何使用PageX和Jquery的PageY拖动图像？

1 个答案: