全部图片使用绝对定位，页面加载的时候，用程序按顺序算出他们的位置定位好
创新互联于2013年开始，是专业互联网技术服务公司，拥有项目成都网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元聊城做网站,已为上家服务,为聊城各地企业和个人服务,联系电话:18980820575
当拖拽完成，如果下面没有图片，这张图片就返回他原来的坐标
如果有，就两个图片兑换坐标，用animate很简单，你懂的
你要考虑坐标记录的问题，可以每次拖拽用全局标量记录
也可以直接记录在图片的属性上
还有一个可能会遇到的问题就是事件起泡
实现思路：
①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离
用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
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
拖拽后的位置跟原来的位置是没有变化的。
$('.brick').index($(this))就可以看出来DOM元素的坐标没有变化。
demo：
不是很明白你的意思，你代码拖动的是那个div啊。另外，是完全露出来还是刚好露出来？？看你应该是想实现下面的功能：1个相框，图片比相框大，想拖动图片，往左拖动的时候，图片右侧刚好露出，就不能再拖，往右边拖动的时候，图片左侧刚好露出，就是说，不让相框里面出现空白，完全被图片填充。是不是啊？？