正文
jquery拖动图片,js拖动图片
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
任意图片拖拽交换位置（jquery特效）
全部图片使用绝对定位，页面加载的时候，用程序按顺序算出他们的位置定位好
当拖拽完成，如果下面没有图片，这张图片就返回他原来的坐标
如果有，就两个图片兑换坐标，用animate很简单，你懂的
你要考虑坐标记录的问题，可以每次拖拽用全局标量记录
也可以直接记录在图片的属性上
还有一个可能会遇到的问题就是事件起泡
相关问答
Q1: js中如何拖动DIV中的图片？
实现思路：
①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离
用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
Q2: jQuery Gridly 拖拽后怎么得到拖拽后的图片位置？？？
拖拽后的位置跟原来的位置是没有变化的。
$('.brick').index($(this))就可以看出来DOM元素的坐标没有变化。
demo：
Q3: 请问jquery 有没有 可以在一个框里拖动图片来剪裁头像的控件？不是在图片上剪切。
JQUERY单独是做不到的 只能配合服务器端进行
JQUERY只是前台做到友好的界面而已 选中的座标传到后台 后台在处理
所以。。。。。你要告诉我们 你的后台是什么语言
自己写吧 我从来不用网上下载的 除了超出能力太多的
原理很简单的 就是获取座标传到后台 然后PHP根据座标进行剪裁就可以了
Q4: Jquery如何拖动缩放底层的图片
HTML
HEAD
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
TITLEonMouseWheel/TITLE
SCRIPT
var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta = 120)
count++;
else if (event.wheelDelta = -120)
count--;
return count;
}
function Resize(count){
oImage.style.zoom = count + '0%';
oCounter.innerText = count + '0%';
}
/SCRIPT
/HEAD
BODY
div align=center
span style="font-weight:bold"Size =
span id="oCounter" style="color:red;"100%/span/span
img id="oImage" src="images/aaa.gif" onmousewheel="return Picture();"
/div
/BODY
/HTML
