html
<div class="mod" id="mod">
<div class="hd" id="hd"></div>
<div class="bd ">
<div class="corner" id="corner"></div>
</div>
</div>
css
*{
margin: 0;
padding: 0;
}
.mod {
position: absolute;
left: 30%;
top: 30%;
400px;
height: 400px;
border: 1px solid red;
min- 100px;
min-height: 100px;
}
.mod .hd {
100%;
height: 30px;
background: grey;
cursor: all-scroll;
}
.mod .corner {
position: absolute;
right: 0;
bottom: 0;
20px;
height: 20px;
background: red;
}
js
var mod=document.getElementById('mod');
var hd=document.getElementById('hd');
var corner=document.getElementById('corner');
function addEvent(obj,type,fn){
obj.addEventListener?obj.addEventListener(type,fn,false):attachEvent('on'+type,fn);
}
function page(){
var pageWidth,pageHeight;
if(window.innerWidth){
pageWidth=window.innerWidth;
pageHeight=window.innerHeight;
}else if(document.compatMode==='CSS1Compat') {
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
return {
pageWidth:pageWidth,
pageHeight:pageHeight
}
}
function move(e){
var left= e.clientX-offsetLeft,
top= e.clientY-offsetTop;
console.log(offsetLeft);
var pageWidth=page().pageWidth,
pageHeight=page().pageHeight;
if(left<0){
left=0;
}else if(left>pageWidth-mod.offsetWidth){
left=pageWidth-mod.offsetWidth
}
if(top<0){
top=0;
}else if(top>pageHeight-mod.offsetHeight){
top=pageHeight-mod.offsetHeight;
}
mod.style.left=left+'px';
mod.style.top=top+'px';
}
var offsetLeft,offsetTop;
addEvent(hd,'mousedown', function (e) {
offsetLeft= e.clientX-mod.offsetLeft;
offsetTop= e.clientY-mod.offsetTop;
addEvent(document, 'mousemove', move);
addEvent(document,'mouseup', function () {
document.removeEventListener('mousemove',move,false);
})
});
var cornerLeft,
cornerTop;
function cornerMove(e){
var left= e.clientX-mod.offsetLeft-cornerLeft;
var top= e.clientY-mod.offsetTop-cornerTop;
if(left<=80){
left=80;
}
if(top<=80){
top=80;
}
corner.style.left=left+'px';
corner.style.top=top+'px';
mod.style.width=left+20+'px';
mod.style.height=top+20+'px';
}
addEvent(corner,'mousedown', function (e) {
cornerLeft= e.clientX-corner.offsetLeft-mod.offsetLeft;
cornerTop= e.clientY-corner.offsetTop-mod.offsetTop;
addEvent(document,'mousemove',cornerMove);
addEvent(document,'mouseup', function () {
document.removeEventListener('mousemove',cornerMove,false);
})
});
第二种拖拽
<div class="dragable"></div>
css
*{
margin: 0;
padding : 0;
}
.dragable {
position: absolute;
100px;
height: 100px;
background: red;
}
js
function Dragdrop(){
var draging=null,
diffX= 0,
diffY=0;
function handleEvent(e){
var e=e || window.event;
var target= e.target|| e.srcElement;
switch (e.type){
case "mousedown":
if(target.className.indexOf('dragable')>-1){
draging=target;
diffX= e.clientX-target.offsetLeft;
diffY= e.clientY-target.offsetTop;
}
break;
case "mousemove":
if(draging){
var left=e.clientX-diffX,
top= e.clientY-diffY;
if(left < 0){
left=0;
}
if(left > windowRect().winWidth-draging.offsetWidth){
left=windowRect().winWidth-draging.offsetWidth; //ps处
}
if(top <= 0){
top=0;
}
if(top>=windowRect().winHeight-draging.offsetHeight){
top=windowRect().winHeight-draging.offsetHeight;
}
draging.style.left=left+'px';
draging.style.top=top+'px';
}
break;
case "mouseup":
draging=null;
break;
}
}
return {
enable: function () {
document.addEventListener('mousedown',handleEvent,false)
document.addEventListener('mousemove',handleEvent,false)
document.addEventListener('mouseup',handleEvent,false)
},
disable: function () {
document.removeEventListener('mousedown',handleEvent,false);
document.removeEventListener('mousemove',handleEvent,false);
document.removeEventListener('mouseup',handleEvent,false);
}
}
}
function addEvent(){
}
Dragdrop().enable();
function windowRect(){
var winWidth= 0,
winHeight=0;
/* if(window.innerHeight){
winWidth=window.innerWidth;
winHeight=window.innerHeight;
}*/
if(document.compatMode=='CSS1Compat'){
winWidth=document.documentElement.clientWidth;
winHeight=document.documentElement.clientHeight;
}else{
winWidth=document.body.clientWidth;
winHeight=document.body.clientHeight;
}
return {
winWidth:winWidth,
winHeight:winHeight
}
}
ps:target目标会在移动中从draging变为document对象,需要注意
通过拖拽实现的碰撞检测
js
window.onload = function () {
var box = document.getElementById('box');
var ul = box.getElementsByTagName('ul')[0];
var li = box.getElementsByTagName('li');
var btn = document.getElementById('btn');
var htmlArr = []; // 存放li中的内容
for (var i = 0; i < li.length; i++) {
htmlArr[i] = li[i].innerHTML; // 复制li中的内容
dragCollide(li[i]); // 给每个li添加拖拽
}
// 随机功能
btn.onclick = function () {
htmlArr.sort(function () {
return Math.random() - 0.5;
});
for(var i = 0; i < htmlArr.length; i++){
li[i].innerHTML = htmlArr[i];
}
return false;
}
// 拖拽
function dragCollide(dragEle) {
dragEle.onmousedown = function (ev) {
var oEvent = ev || event;
var isIE = !!window.ActiveXObject;
var disX = oEvent.clientX - dragEle.offsetLeft;
var disY = oEvent.clientY - dragEle.offsetTop;
for (var i = 0; i < li.length; i++) {
li[i].style.zIndex = 1;
};
this.style.zIndex = '2';
// 创建占位节点
var clone = document.createElement('div');
clone.className = 'clone';
clone.style.left = this.offsetLeft + 'px';
clone.style.top = this.offsetTop + 'px';
box.appendChild(clone);
// 记录初始位置
var oldL = dragEle.offsetLeft;
var oldT = dragEle.offsetTop;
document.onmousemove = function (ev) {
var oEvent = ev || event;
dragEle.style.left = oEvent.clientX - disX + 'px';
dragEle.style.top = oEvent.clientY - disY + 'px';
var ele = getCollEle(dragEle); // 比较最近的元素
if (ele) {
ele.style.marginTop = '-10px';
ele.style.marginLeft = '-10px';
ele.style.borderColor = 'red';
}
};
document.onmouseup = function () {
var ele = getCollEle(dragEle);
if (ele) {
dragEle.style.left = ele.style.left;
dragEle.style.top = ele.style.top;
ele.style.left = oldL + 'px';
ele.style.top = oldT + 'px';
ele.style.background = '#ccc';
} else {
dragEle.style.left = oldL + 'px';
dragEle.style.top = oldT + 'px';
}
box.removeChild(clone);
document.onmousemove = null;
document.onmouseup = null;
isIE && dragEle.releaseCapture()
};
isIE && dragEle.setCapture();
return false;
}
}
// 获取距离最近的元素
function getCollEle(dragEle) {
var min = 10000000; // 参考值
var minEle = null;
for (var i = 0; i < li.length; i++) { // 待优化
var num = collide(dragEle, li[i]);
if (num < min && num > 0) { // > 0 表示碰撞到情况
min = num;
minEle = li[i];
}
li[i].style.marginTop = '';
li[i].style.marginLeft = '';
li[i].style.borderColor = '#ccc';
}
return minEle;
}
}
// 碰撞检测,并返回中心点距离
function collide(dragEle, testEle) {
var dragL = dragEle.offsetLeft;
var dragR = dragEle.offsetLeft + dragEle.offsetWidth;;
var dragT = dragEle.offsetTop;
var dragB = dragEle.offsetTop + dragEle.offsetHeight;
var testL = testEle.offsetLeft;
var testR = testEle.offsetLeft + dragEle.offsetWidth;;
var testT = testEle.offsetTop;
var testB = testEle.offsetTop + dragEle.offsetHeight;
var x = Math.abs(testL + testEle.offsetWidth/2 - (dragL + dragEle.offsetWidth/2));
var y = Math.abs(testT + testEle.offsetHeight/2 - (dragT + dragEle.offsetHeight/2));
if(dragR < testL || dragB < testT || dragL > testR || dragT > testB){
return 0;
}else{
return Math.sqrt(x*x + y*y);
}
}
参考http://riny.net/lab/#javascript_drag-photo