不带插件的Jquery拖放
Jquery Drag and Drop without plugins
我曾尝试使用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');
}
}
});
这是我尝试过的演示链接。
我已经重新编写了您的代码,并更新了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;
});
碰撞检测
然后我建议使用以下代码段来处理冲突:
jQuery/JavaScript冲突检测
我认为这一定是一项学术任务,或者你想这样做是为了学习(否则,为什么有人不想使用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设置一些断点,并查看是否相应地填充了所有变量。
我希望这会有所帮助,干杯!
相关文章:
- dblclick事件是在jquery拖放后触发的
- 使用jquery拖放图像
- 只允许一个可放置区域 jquery 拖放
- Jquery 拖放允许 2 个元素
- 区分不同的可拖放元素(jQuery 拖放)
- jQuery 拖放更改我的 URL - 返回 false 不起作用
- JavaScript/HTML5/jQuery 拖放上传 - “未捕获的类型错误:无法读取未定义的属性'文件
- 使用 jQuery 拖放从 SQL 表中删除一行
- jQuery 拖放,验证可拖动 ID
- jQuery拖放N个,不允许在克隆放置容器上拖放
- jQuery拖放然后打开特定于每个列表项的警报
- jQuery 拖放不起作用
- Jquery 拖放 z 索引
- 不带插件的Jquery拖放
- jQuery拖放速度减慢
- jQuery拖放时移动
- 在父容器上使用克隆的Jquery拖放照片编辑器
- 使用asp.net c#功能进行jquery拖放
- Jquery拖放问题
- JQuery拖放-基于在dropzone中拖放的不同图标应用css类