js实现div的拖拽
functionmm(evt){e=evt||event;if(clicked==1){newx=cleft+e.clientX-x;newy=ctop+e.client...
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?这是一种语法吗? 展开
{
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?这是一种语法吗? 展开
5个回答
展开全部
e = evt || event;这个部位针对的浏览器兼容问题的解决方法,这个evt可以是别的值,这个是浏览器默认的执行程序,只要function mm()括号有东西就可以;这种||符号有取真的意思。e.clientX取得时鼠标的横坐标的值
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
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>
你也可以试试这个:
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
把下面的代码存进一个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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这里有一个在div里面拖动另一个层的效果
可以参考一下
可以参考一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |