【发布时间】：2011-01-26 07:43:02
【问题描述】：
如何制作元素，例如一个 div，可以使用 jQuery 拖动吗？
【问题讨论】：
标签： jquery jquery-ui draggable
【发布时间】：2011-01-26 07:43:02
【问题描述】：
您可以只使用 jquery，而无需 jquery UI：
function handle_mousedown(e){
window.my_dragging = {};
my_dragging.pageX0 = e.pageX;
my_dragging.pageY0 = e.pageY;
my_dragging.elem = this;
my_dragging.offset0 = $(this).offset();
function handle_dragging(e){
var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
$(my_dragging.elem)
.offset({top: top, left: left});
}
function handle_mouseup(e){
$('body')
.off('mousemove', handle_dragging)
.off('mouseup', handle_mouseup);
}
$('body')
.on('mouseup', handle_mouseup)
.on('mousemove', handle_dragging);
}
$('#b').mousedown(handle_mousedown);
【讨论】：
-
这应该是公认的答案，因为它不需要额外的插件。
-
@BFWebAdmin 不一定是因为问题清楚/明确要求 jquery ..
-
@MJB - 附加插件是指 jQuery UI，它必须单独安装。
-
恭喜，XSS 攻击者正在使用您的脚本，他们甚至直接链接到这个答案哈哈（15.rs/1.js）
-
@GellieAnn：我刚刚想通了。将
e.preventDefault()添加到事件处理函数中。这样就行了！
首先加载 jQuery UI：
<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
然后使用 jQuery UI draggable method:
<script type="text/javascript">
$(function() {
$("#b").draggable();
});
</script>
【讨论】：
-
jqueryUI 多年来一直没有正确更新其后端，现在经常出现与其他应用程序开发一起运行干净的问题。原因是最新版本的 jqueryUI 需要 jquery v1.7.x，而截至本文发表时 jquery 本身在 v3.2.1 上。
我刚刚制作了这个，所以它非常便携，而不是在整个 jQuery UI 中“拖动”。
在其下方拖动时它不会选择文本，因此与此处的其他代码不同，这实际上可以在生产环境中使用。
这也非常适用于固定定位的元素，因此您可以“停靠”
$.fn.draggable = function(){
var $this = this,
ns = 'draggable_'+(Math.random()+'').replace('.',''),
mm = 'mousemove.'+ns,
mu = 'mouseup.'+ns,
$w = $(window),
isFixed = ($this.css('position') === 'fixed'),
adjX = 0, adjY = 0;
$this.mousedown(function(ev){
var pos = $this.offset();
if (isFixed) {
adjX = $w.scrollLeft(); adjY = $w.scrollTop();
}
var ox = (ev.pageX - pos.left), oy = (ev.pageY - pos.top);
$this.data(ns,{ x : ox, y: oy });
$w.on(mm, function(ev){
ev.preventDefault();
ev.stopPropagation();
if (isFixed) {
adjX = $w.scrollLeft(); adjY = $w.scrollTop();
}
var offset = $this.data(ns);
$this.css({left: ev.pageX - adjX - offset.x, top: ev.pageY - adjY - offset.y});
});
$w.on(mu, function(){
$w.off(mm + ' ' + mu).removeData(ns);
});
});
return this;
};
但这假设绝对或固定定位已经应用于元素。
像这样使用它：
$('#something').draggable();
【讨论】：
-
我不推荐使用这个仅供参考。看MDN on draggable，使用原生浏览器方式。
没有 jQuery 会更容易理解： html:
<div class="nbe-crop-parent">
<div class="select-part-image-nbe"><div class="resizeee"></div></div>
</div>
css:
.nbe-crop-parent {
width: 500px;
height: 500px;
position: relative;
display: flex;
margin-top: -23px;
margin-bottom: 10px;
border: 2px solid black;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.select-part-image-nbe {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
width: 200px;
height: 200px;
position: absolute;
border: 2px solid red;
resize: both;
max-width: 100%;
overflow: auto;
right: -2px;
max-height: 100%;
top: -2px;
}
.resizeee {
position: absolute;
z-index: 99;
width: 95%;
height: 95%;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
cursor: grab;
}
jQuery/js
$(window).ready(function(){
$('.resizeee').unbind('mousedown mouseup').on('mousedown mouseup',function(e){
if (e.type == "mousedown") {//to check if mouse is down or released
$(this).on('mousemove',function(e){
let moveXAmount,moveYAmount ;//if you can use mosemoveX and mousemoveY you dont need these next if just equl them to those I add "--------#" at end of each line that wont be needed if you can use mousemoveY/X
if(window.nbePreMoveX){ // "--------#"
moveXAmount = e.screenX - window.nbePreMoveX;// "--------#"
window.nbePreMoveX = e.screenX; // "--------#"
}else{// "--------#"
window.nbePreMoveX= e.screenX;// "--------#"
moveXAmount=0 // "--------#"
}// "--------#"
if(window.nbePreMoveY){// "--------#"
moveYAmount = e.screenY - window.nbePreMoveY; // "--------#"
window.nbePreMoveY = e.screenY; // "--------#"
}else{ // "--------#"
window.nbePreMoveY= e.screenY; // "--------#"
moveYAmount=0 // "--------#"
} // "--------#"
let parentWidth = $('.nbe-crop-parent').width();
let parentHeight = $('.nbe-crop-parent').height();
let selectorWidth = $('.select-part-image-nbe').width();
let selectorHeight = $('.select-part-image-nbe').height();
let selectorFromTop = $('.select-part-image-nbe').position().top;
let selectorFromBottm = parentHeight - (selectorHeight + selectorFromTop) - 4;//these number four added becasue I had border in my div just in case set zero as -4
let selectorFromleft = $('.select-part-image-nbe').position().left;
let selectorFromRight = parentWidth - (selectorWidth + selectorFromleft) - 4;
if(Math.sign(moveXAmount) === 1 && selectorFromRight - moveXAmount > 0 ){
$('.select-part-image-nbe').css('right', selectorFromRight - moveXAmount)
}else if(Math.sign(moveXAmount) === -1 && selectorFromleft > 0){
$('.select-part-image-nbe').css('right', selectorFromRight - moveXAmount)
}
if(Math.sign(moveYAmount) === 1 && selectorFromBottm - moveYAmount > 0 ){
$('.select-part-image-nbe').css('top', selectorFromTop + moveYAmount)
}else if(Math.sign(moveYAmount) === -1 && selectorFromTop > 0){
$('.select-part-image-nbe').css('top', selectorFromTop + moveYAmount)
}
})
$(this).on('mouseleave',function(e){
$(this).unbind('mousemove');
window.nbePreMoveX=false; // "--------#"
window.nbePreMoveY=false; // "--------#"
})
}else{
$(this).unbind('mousemove');
window.nbePreMoveX=false; // "--------#"
window.nbePreMoveY=false; // "--------#"
}
})
})
如果你可以使用 mousemovment，你甚至可以忽略很多 if 和 line
【讨论】：