难度挺大的问题,和一般的是不一样的,关于拖动

Question

本帖最后由 chinaphp2008 于 2015-01-20 10:59:19 编辑

Answer 1

<script type="text/javascript" language="javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function(){
var img = $('#zhuanti img');
var zt = $('#zhuanti');
$(document).on('mousedown','#zhuanti img',function(e){
_move=true;
_x=e.pageX-parseInt(zt.css("left"));
_y=e.pageY-parseInt(zt.css("top"));
}).on('drop',function(e){
var e_ori = e.originalEvent;
var x=e_ori.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e_ori.pageY-_y;
zt.css({top:y,left:x});//控件新位置
e.preventDefault();
return false;
}).on('dragover',function(e){
var ori = e.originalEvent;
ori.dropEffect="move";
e.preventDefault();
return false;
})});
</script>

Answer 2

if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
 var y=e.pageY-_y;
$("#zhuanti").css({top:y,left:x});//控件新位置
event.preventDefault();
 }

Answer 3

测了下还是不行，ie下必须去掉图上的a标签才行,其他浏览器还是不行。
原因就是图片时别原有浏览器事件给影响了，而导致没有捕获到你写的鼠标松开事件。
对这方面我不熟悉，看看还有没有高人吧。