vlambda博客
学习文章列表

· CSS

.frame {

width: 300px;

height: 200px;

position: absolute;

background-color: #fff;

box-shadow: 3px 3px 9px #bbb;

border-radius: 5px;

margin: 10px;

}

.header {

color: white;

height: 30px;

border-radius: 5px 5px 0px 0px;

background-color: red;

text-align: center;

line-height: 30px;

}

· html

<div class="frame" id="frame">

<div class="header">鼠标拖拽标签</div>

<div class="body">content</div>

</div>

· script

var clickstatus = false;

var lastX = 0;

var lastY = 0;

var lastcX = 0;

var lastcY = 0;

function mousedown(e) {

if (e.target.className.indexOf('header') != -1) {

clickstatus = true;

var moveObject = document.getElementById('frame');

lastX = moveObject.offsetLeft;

lastY = moveObject.offsetTop;

lastcX = e.clientX;

lastcY = e.clientY;

}

}

function mousemove(e) {

var moveObject = document.getElementById('frame');

if (clickstatus) {

moveObject.style.left = lastX + (e.clientX - lastcX - 10) + 'px';

moveObject.style.top = lastY + (e.clientY - lastcY - 10) + 'px';

}

}

function mouseup(e) {

clickstatus = false;

lastX = 0;

lastY = 0;

lastcX = 0;

lastcY = 0;

}

document.addEventListener('mousedown', mousedown);

document.addEventListener('mousemove', mousemove);

document.addEventListener('mouseup', mouseup);