div 拖拽生产html,div拖拽 功能.html

html{

height: 100%;

}

body{

/*height: calc(100% - 16px);*/

margin:0;

height: 100%;

}

#main{

width: 100px;

height:100px;

background-color: red;

position:absolute;

}

drag();

function drag() {

var odrag = document.getElementById("main");

odrag.onmousedown = function(ev) {

var oevent = ev || event;

var distanceX = oevent.clientX - odrag.offsetLeft;

var distanceY = oevent.clientY - odrag.offsetTop;

var old_x = oevent.clientX;

var old_y = oevent.clientY;

document.onmousemove = function(ev) {

var oevent = ev || event;

var _x, _y;

_x = oevent.clientX - distanceX;

_y = oevent.clientY - distanceY;

if (_x < 0) _x = 0;

if (_y < 0) _y = 0;

if (_x > document.body.clientWidth - odrag.offsetWidth) _x = document.body.clientWidth - odrag.offsetWidth;

if (_y > document.body.clientHeight - odrag.offsetHeight) _y = document.body.clientHeight - odrag.offsetHeight;

odrag.style.left = _x + 'px';

odrag.style.top = _y + 'px';

};

document.onmouseup = function(ev) {

var oevent = ev || event;

var _x = oevent.clientX - distanceX;

var _y = oevent.clientY - distanceY;

var leftindex = (_x / $("body").width()).toFixed(2);

var topindex = (_y / $("body").height()).toFixed(2);

//存储位置区域比列或者具体数据

document.onmousemove = null;

document.onmouseup = null;

};

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史