拖放- JQuery插件
Drag and Drop - JQuery Plugin
我正在尝试创建自己的拖放插件。
我的插件:
$.fn.drag = function(options) {
var defaults = {
revert: false,
onDrag: function() {},
onDrop: function() {}
};
var o = $.extend(defaults, options);
return this.each(function() {
var position = $(this).position();
var ptop = position.top;
var pleft = position.left;
var down = false;
$(this).mousedown(function(event) {
down = true;
$(this).css({
cursor: 'move',
}).mousemove(function(event) {
if (down == true) {
$(this).css({
cursor: 'move',
});
var w = $(this).width();
var h = $(this).height();
var left3 = (w / 2) + 7;
var top3 = (h / 2) + 7;
$(this).css({
cursor: 'move',
left: (event.clientX) + (3 * 3) - left3,
top: (event.clientY) + (3 * 3) - top3
});
}
}).bind('mousemove', o.onDrag).mouseup(function() {
down = false;
$(this).css({
cursor: 'default',
});
if (o.revert == true) {
$(this).animate({
top: ptop,
left: pleft
}, 300);
} else {}
}).bind('mouseup', o.onDrop);
});
});
}
我的问题:当我试图拖动匹配的元素时,光标会在里面居中。我是故意这样做的,因为我不知道怎么做,所以如果我点击元素的任何部分,它就会拖动。如你所见
光标居中元素代码:
var w = $(this).width();
var h = $(this).height();
var left3 = (w / 2) + 7;
var top3 = (h / 2) + 7;
$(this).css({
cursor: 'move',
left: (event.clientX) + (3 * 3) - left3,
top: (event.clientY) + (3 * 3) - top3
});
是否有一种方法可以使光标不在元素内部居中,并且可以在单击元素的任何地方拖动元素?
提前致谢:D
您可以跟踪mousemove
ing时光标位置与mousedown
ed时开始光标位置的差异,并适当地应用此数据:http://jsfiddle.net/BggPn/15/.
$(this).mousedown(function(event) {
down = true;
var dx = event.pageX - $(this).position().left, // difference from left border
dy = event.pageY - $(this).position().top; // difference from top border
:
$(this).css({
cursor: 'move', // you had set the cursor already by the way
left: event.pageX - dx, // set left border to cursor x position minus difference
top: event.pageY - dy // set top border to cursor y position minus difference
});
相关文章:
- 如何在Angular2中使用jQuery插件
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 水平视差滚动从头开始-没有插件(jQuery)
- 什么是最好的表单元素样式库/插件(jQuery)
- 如何在Bootstrap Modal上使用Vue.js渲染插件jQuery(作为工具提示和Switchery)
- 屏蔽输入插件 jquery
- 多选插件 jquery 不适用于 javascript
- 使用验证器插件 Jquery 验证动态输入表单元素
- 如何从网格数据表插件 jQuery 中清除数据
- 插件Jquery Validation的错误消息显示不正确
- Livestamp插件Jquery-如何显示时间
- Youtube跟踪JQuery插件JQuery .tubeplayer.js
- 创建句柄特性的拖放插件- jquery
- 如何使用表排序插件- jquery搜索表中的项
- Ajax文件上传进度没有任何插件Jquery
- 航路点插件Jquery
- 在数据表插件jQuery中设置分页长度
- 如何在OpenUI5/SAPUI5中使用jQuery插件(jQuery验证引擎)
- 时钟插件 jQuery
- jQuery插件'jQuery .shuffle.js'执行排序