2

我尝试使用 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');
  }
  }
});

这是我尝试过的演示链接。

4

2 回答 2

3

我已经修改了你的代码，并更新了小提琴。 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;
});

碰撞检测

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

jQuery/JavaScript 碰撞检测

于 2013-08-27T11:02:31.590 回答
0

我假设这必须是一项学术任务，或者您想为学习目的而这样做（否则，为什么有人不想使用 JQuery UI 的可拖动？）但无论如何，下面的链接应该指导正确的方向：http： //css-tricks.com/snippets/jquery/draggable-without-jquery-ui/

如果您仍然想知道您的代码有什么问题，我建议您重新开始并一点一点地添加以尝试实现基本功能，然后立即提出可拖动和可放置的功能，例如，您的 mousemove 功能似乎与JQuery的文档，我相信，为了检索pageX和pageY，你需要函数参数中的事件对象：

$("#target").mousemove(function(event) {
  var msg = "Handler for .mousemove() called at ";
  msg += event.pageX + ", " + event.pageY;
  $("#log").append("<div>" + msg + "</div>");
});

尝试使用 Firebug 设置一些断点，并查看是否所有变量都被相应地填充。

希望对你有帮助，加油！

于 2013-08-27T10:40:56.577 回答