甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
实现思路：
公司主营业务：网站设计、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出临西免费做网站回馈大家。
①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离
用JavaScript事件方法表示就是：
① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()
drag.js代码：
var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
//获取相关CSS属性
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
//拖拽的实现
var startDrag = function(bar, target, callback){
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
//o是移动对象
bar.onmousedown = function(event){
params.flag = true;
if(!event){
event = window.event;
//防止IE文字选中
bar.onselectstart = function(){
return false;
}
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function(){
params.flag = false;
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
};
document.onmousemove = function(event){
var e = event ? event: window.event;
if(params.flag){
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
}
if (typeof callback == "function") {
callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
}
}
};
HTML/CSS
style type="text/css"
#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}
/style
div id="box"
div id="main"
div id="bar"拖拽/div
div id="content"
内容……
/div
/div
/div
JS部分
script src="drag.js" type="text/javascript"/script
script type="text/javascript"
var oBox = document.getElementById("box");
var oBar = document.getElementById("bar");
startDrag(oBar, oBox);
/script
全部图片使用绝对定位，页面加载的时候，用程序按顺序算出他们的位置定位好
当拖拽完成，如果下面没有图片，这张图片就返回他原来的坐标
如果有，就两个图片兑换坐标，用animate很简单，你懂的
你要考虑坐标记录的问题，可以每次拖拽用全局标量记录
也可以直接记录在图片的属性上
还有一个可能会遇到的问题就是事件起泡
如果你的li需要浮动的话，试试看给ul加一个class，例如
ul class="clearFloat"
.clearFloat的定义为（不能修改哦，亲，里面的每一行都有用的）
.clearFloat:after {
visibility: hidden;
clear: both;
display: block;
height: 0px;
content: "."
}
.clearFloat {
zoom: 1;
}
这个样式是专门用来清除浮动的。如果代码不能恰当的清除浮动会造成容器大小的计算错误，导致拖动失败
jquery的拖动函数有个参数控制这个，有很多活动范围可选择，如下：
1.containment:
[类型]选择器, 元素, 字符串, 数组.
选择器: 只能在选择器约束的元素内拖动
元素: 只能在给定的元素内拖动
2.字符串:
parent: 只能在父容器内拖动
document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...
3.数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
false: 不限制拖动的活动范围
[默认值]false
[产生影响]
影响指定可拖动控件的活动区域.
[代码示例]
[初始化]
$('.selector').draggable({ containment: 'parent' });
[获取属性值]
var containment = $('.selector').draggable('option', 'containment');
[设置属性值]
$('.selector').draggable('option', 'containment', 'parent');
用h5的拖放事件。ondrag,ondragenter,ondragover,ondrop等。给你一个demo。记得自己加图片。
!DOCTYPE HTML
html
head
titleHTML5实现拖拽操作/title
meta charset="utf-8"/
style
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
/style
/head
body
div id="info"
h2温馨提示：可将照片直接拖到垃圾箱中/h2
/div
div id="album" class="album"
h2相册/h2
img draggable="true" id="img1" src="jq/audio1.png" /
img draggable="true" id="img2" src="jq/audio2.png" /
img draggable="true" id="img3" src="jq/audio3.png" /
div id="div1" draggable="true"暗涌/div
/div
div id="trash" class="album"
h2垃圾箱/h2
h1 id="h1" draggable="true"what/h1
/div
br/
/body
script
console.log("start");
info = document.getElementById("info");
src = document.getElementById("album");
target = document.getElementById("trash");
function converse(){
target.ondragstart = function(e){
var dragid = e.target.id;
var divdraged = document.getElementById(dragid);
console.log(divdraged);
divdraged.ondragend = function(){
info.innerHTML = "h2温馨提示：可将照片直接拖到垃圾箱中/h2";
}
e.dataTransfer.setData("div",dragid);
}
target.ondrag = function(){
info.innerHTML = "h2确认回收此垃圾/h2"
}
src.ondrop = function(e){
var dragid = e.dataTransfer.getData("div");
console.log(dragid);
var dragobject = document.getElementById(dragid);
console.log(dragobject);
dragobject.parentNode.removeChild(dragobject);
info.innerHTML = "h2恢复成功！/h2";
src.appendChild(dragobject);
e.preventDefault();
}
src.ondragenter = function(e){
e.preventDefault();
}
src.ondragover = function(e){
e.preventDefault();
}
}
function init(){
src.ondragstart = function (e) {
var dragImgId = e.target.id;
console.log(dragImgId);
var dragImg = document.getElementById(dragImgId);
dragImg.ondragend = function(e){
info.innerHTML="h2温馨提示：可将照片直接拖到垃圾箱中/h2";
};
e.dataTransfer.setData("img",dragImgId);
};
src.ondrag = function(e){
info.innerHTML="h2--照片正在被拖动--/h2";
}
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
target.ondrop = function (e) {
var draggedID = e.dataTransfer.getData("img");
console.log(draggedID);
var oldElem = document.getElementById(draggedID);
oldElem.parentNode.removeChild(oldElem);
target.appendChild(oldElem);
info.innerHTML="h2温馨提示：可将照片直接拖到垃圾箱中/h2";
e.preventDefault();
}
}
init();
converse();
/script
/html
主要分三个部分，注册Handler的Click事件
Click事件引发是开始拖动，此时注册Document的MouseMove事件，Move的时候修改对象的位置
松开或者ESC的时候取消移动，注销Document的Move事件
基本上所有的DragDrop都是这么实现的