Jquery拖放没有插件 [英] Jquery Drag and Drop without plugins

问题描述

我尝试使用JQuery创建拖放插件。

I have tried to create a drag and drop plugin using JQuery.

$('.draggable').on{
  mousemove : function(){
    var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element
        x : pageX,
        y : pageY 
    };
    $(this).css({
      top : mouseposition.y,
      left : mouseposition.y
    });
  if( // this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison
    $('.draggable').offset().top < $(.droppable').offset().top 
    &&
    $('.draggable').offset().left < $(.droppable').offset().left
  ) {
      alert('the item has been dropped');
  }
  }
});

这是 demo 链接我尝试过的内容。

Here is the demo link what I have tried.

推荐答案

我重写了你的代码，并更新了小提琴。
http://jsfiddle.net/XTMK8/2/

I have reworked your code, and updated the fiddle. http://jsfiddle.net/XTMK8/2/

var dragging = undefined;

$('.draggable').on('mousedown', function(){
    dragging = $(this);
});

$('body').on('mousemove', function(e){
    if(typeof dragging != "undefined") {
        dragging.css({
             top : e.pageY - 50,
             left : e.pageX - 50
        });       
    }
});

$('body').on('mouseup', function(){
    dragging = undefined;
});

碰撞检测

我建议使用以下代码段来处理冲突：

I would then recommend using the following snippet to handle collision:

jQuery / JavaScript碰撞检测

这篇关于Jquery拖放没有插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！