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

Question

大家好，我是 Javascript 和 Jquery 的新手。首先，我有一个带有 id 的图像，即#imag_4，我在函数 imageDrag() 中保留了这个点击函数。当我点击图像时，我将图像传递给 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 被修改并简化为 span 元素示例