js实现div的拖拽

Question

function mm(evt)
{
e = evt || event;
if (clicked==1)
{
newx=cleft+e.clientX-x;
newy=ctop+e.clientY-y;
document.getElementById("c").style.left=newx;
document.getElementById("c").style.top=newy;
}
}
不明白 e = evt || event;是啥意思？e.clientX是啥？
怎么函数有个参数evt?这是一种语法吗？

Answer 1

<div id="c" onmousedown="mm(event);">123123</div>
evt参数是就是上面的event对象;
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
因为火狐不支持直接获取event对象.因此FF在触发拖拽事件前需要明确传递event.
IE则不需要.所以才出现 e = evt || event; 主要是兼容所用.
e.clientX是获取当前鼠标的横坐标.

Answer 2

e = evt || event;这个部位针对的浏览器兼容问题的解决方法，这个evt可以是别的值，这个是浏览器默认的执行程序，只要function mm()括号有东西就可以；这种||符号有取真的意思。e.clientX取得时鼠标的横坐标的值

Answer 3

e.clientX是获取当前鼠标的横坐标.
你也可以试试这个：
<div id="divBody" style="position:absolute;width:350px;height:100px;border:1px;border-style:solid;background-color:Gray;top:300px;left:400px;display:none">
<asp:Button ID="btn_OK" runat="server" Text="关闭" OnClientClick = "return Set_ObjState(false)" />
<asp:Image ID="Image4" ImageUrl="~/image/ziwopingjiafanli.gif" runat="server" />
</div>

<script type="text/javascript" language="javascript">
function Set_ObjState(bFlag)
{
var divH = $("#divHead"),divB = $("#divBody");
if(bFlag)
{
$(divH).attr("disabled","disabled");
$(divB).show();
}
else
{
$(divH).attr("disabled","");
$(divB).hide();
}
return false;
}
var IsSelect = false //是否选中控件
,selX
,selY;

$("#divBody").mousedown(function(event){
IsSelect = true;
var obj = get_obj($(this));
obj.style.background='Wheat';

selX = event.clientX - obj.style.left.replace("px",""); //取出鼠标停留点与控件实际X,Y值的间隙值
selY = event.clientY - obj.style.top.replace("px","");
});

$("#divBody").mouseup(function(){
out_obj($(this));//离开后改变
});

$("#divBody").mouseout(function(){
out_obj($(this));
});

$("#divBody").mousemove(function(event){
if(IsSelect)
{
var obj = get_obj($(this));

obj.style.left = event.clientX - selX; //当鼠标拖动时，控件移动，鼠标拖动值应减掉间隙值
obj.style.top = event.clientY - selY;

$("#txt_X").val(event.clientX - selX);
$("#txt_Y").val(event.clientY - selY);
}
});

function out_obj(obj)
{
IsSelect = false;
var obj = get_obj($(obj));
obj.style.background='celeste';
}

function get_obj(jObj)
{
return document.getElementById($(jObj).attr("id"));
}
</script>

Answer 4

把下面的代码存进一个html文件，兼容手机和PC

<style>    
* {    
margin: 0;    
padding: 0    
}    
#user_cover {    
position: fixed;    
top: 40%;    
right: 0;    
width: 4rem;    
height: 4rem;    
background-color: rgba(0, 0, 0, 0.3);    
}    
</style>    
<div id="user_cover"></div>    
<script>    
function onTouchMove(point) {    
document.getElementById('user_cover').style.top = (point.changedTouches[0].clientY) + "px";    
document.getElementById('user_cover').style.left = (point.changedTouches[0].clientX) + "px";    
}    
function onMouseDown(point) {    
document.onmousemove = function (event) {    
document.getElementById('user_cover').style.top = event.clientY+"px";    
document.getElementById('user_cover').style.left = event.clientX+"px";    
console.log(point);    
console.log(event);    
};    
document.onmouseup = function () {    
document.onmousemove = null;    
document.onmouseup = null;    
};    
}    
document.getElementById('user_cover').addEventListener('touchmove', onTouchMove, false);    
document.getElementById('user_cover').addEventListener('mousedown', onMouseDown, false);    
</script>

Answer 5

这里有一个在div里面拖动另一个层的效果
可以参考一下