思路
- 父盒子相对定位，子元素，也就是被拖拽的元素绝对定位
- 当鼠标在子元素中按下时，绑定鼠标移动事件，根据鼠标位置改变元素位置
- 设置鼠标当前位置（offsetX,offsetY,这时和父的相对位置）为元素的中心位置
- 移动时改变位置css中的left为offsetX...的位置
- 当鼠标离开时，解绑鼠标移动事件
实现过程（一）
css 部分
.decision-box{
position: relative;
width: 1500px;
height: 600px;
border: 1px solid #000;
border-radius: 6px;
/*margin-left: -40px;*/
}
.item{
position: absolute;
width: 50px;
height: 30px;
background: green;
border-radius: 6px;
text-align: center;
line-height: 30px;
cursor: pointer;
left: 50px
}
html 部分
<div class="decision-box decision_box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
js 部分
//鼠标按下，要在移动元素上按下
$(document).on('mousedown','.decision_box .item',function(e){
var ele = $(e.target);
$(document).on('mousemove','.decision_box',function(e){
//移动鼠标时改变元素位置
var x = e.offsetX,
y = e.offsetY;
ele.css({
left:x - 25 + 'px',
top:y - 15 + 'px'
});
e.stopPropagation();
});
e.stopPropagation();
});
//鼠标放开
$(document).on('mouseup',function(){
//解除鼠标移动事件
$(document).off('mousemove');
});
这时，发生了错误，元素一闪一闪的，位置不是一直跟着鼠标，在mousemove触发函数里打印一下位置，发现位置不一直是鼠标位置。原来是应为鼠标位置offsetX的原因。
关于鼠标位置
- clientX 相对于可是窗口的距离
- offsetX 相对于e.target元素的位置
- pageX 相对于文档的左边缘
- screenX 相对于屏幕的位置
原来offsetX是相对于e.target元素的位置。加入被拖拽元素宽高100px,当我点击100px,100px时，元素的中心位置变为100,100；此时offsetX又变为了50；这时offsetX又变回100；（以上数字只是数字，因为有移动）。如上，就形成了一闪一闪，之后鼠标会超过元素范围，这时，元素位置就在鼠标相对于本身和鼠标相对于父盒子之间切换。
那么怎么解决这个问题呢？我的思路是：
- 使用其它鼠标位置，当点击元素时获取位置作为初始位置
- 当移动时获取位置并求出相对位移，这个相对于位移也就是元素要移动的距离。
实现过程（二）
js 部分
//鼠标按下，要在移动元素上按下
$(document).on('mousedown','.decision_box .item',function(e){
console.log(parseInt($(e.target).css('left')))
var ele = $(e.target);
var initX = e.clientX,
initY = e.clientY,
itemX = parseInt(ele.css('left'));
itemY = parseInt(ele.css('top'));
$(document).on('mousemove','.decision_box',function(e){
//移动鼠标时改变元素位置
var curX = e.clientX,
curY = e.clientY;
ele.css({
left:itemX + (curX - initX) + 'px',
top:itemY + (curY - initY) + 'px'
});
e.stopPropagation();
});
e.stopPropagation();
});
//鼠标放开
$(document).on('mouseup',function(){
//解除鼠标移动事件
$(document).off('mousemove');
});
成功，可以拖动了，这时又遇上了一个问题，当拖动元素时，有其它文本别选中时，拖拽又出现了bug，这时就要用到下面面这两个属性
onselectstart = "return false";
onselect = "return false";
- onselectstart事件不被input和textarea标签支持，而onselect事件只被input和textarea支持。
- Firefox/Opera不支持onselectstart事件Firefox中可以使用CSS "-moz-user-select:none"属性来禁止文本选定
- webkit浏览器可以使用“-khtml-user-select”，当然也可以使用onselectstart事件来阻止用户选定元素内文本，如下
<div onselectstart="return false">accc</div>
这个属性意思就是不让文本被选中。要做的就是当点击元素时，上这个属性，当放开鼠标时去掉这个属性（改成return true）；
最后代码
//鼠标按下，要在移动元素上按下
$(document).on('mousedown','.decision_box .item',function(e){
$('body').attr('onselectstart','return false');
console.log(parseInt($(e.target).css('left')))
var ele = $(e.target);
var initX = e.clientX,
initY = e.clientY,
itemX = parseInt(ele.css('left'));
itemY = parseInt(ele.css('top'));
$(document).on('mousemove','.decision_box',function(e){
//移动鼠标时改变元素位置
var curX = e.clientX,
curY = e.clientY;
ele.css({
left:itemX + (curX - initX) + 'px',
top:itemY + (curY - initY) + 'px'
});
e.stopPropagation();
});
e.stopPropagation();
});
//鼠标放开
$(document).on('mouseup',function(){
$('body').attr('onselectstart','return true');
//解除鼠标移动事件
$(document).off('mousemove');
});
这时，选中文本后再进行拖拽还有问题,(也可不解决)我暂时不知道；还有碰撞检测什么的也没加。待续......
