zoukankan      html  css  js  c++  java
  • 利用JavaScript实现简单的拖动层(只使用于IE)

    本来在项目中不是必须的,但是我觉得如果能实现拖动给客户感觉会更好一点,所以就开始写一个拖动,其实网上有很多可以拿过来就用的源码,但是总想自己写一个,因为我觉得大部分代码写的太多了。所以就参考他们的,写我自己的。
    实际上就是用了三个事件函数
    1.onmousedown 2.onmousemove 3.onmouseup
    利用这三个事件函数就可以了,代码如下:
        <script type="text/javascript">
            
    var x,y;
            
    function mousedown(obj)
            
    {
                obj.onmousemove 
    = mousemove;
                obj.onmouseup 
    = mouseup;
                
                oEvent 
    = window.event ? window.event : event;
                x 
    = oEvent.clientX;
                y 
    = oEvent.clientY;
            }

            
    function mousemove()
            
    {
                oEvent 
    = window.event ? window.event : event;
                
    var _top = oEvent.clientY - y + parseInt(this.style.top) + "px";
                
    var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
                
    this.style.top = _top;
                
    this.style.left = _left;
                x 
    =  oEvent.clientX;
                y 
    =  oEvent.clientY
            }

            
    function mouseup()
            
    {
                
    this.onmousemove = null;
                
    this.onmouseup = null;
            }

        
    </script>
    html部分是
    <div id="div1" style=" 100px; height: 100px; top:10px; left:15px; cursor:move; background-color:Blue; position:absolute;" onmousedown="mousedown(this)" > </div>

    注意事项:
    1.要拖动的div一定要把position属性设置absolute;否则按流布局的话无法实现拖动。
    2.一定要设置top和left的初始值,否则当onmousemove事件触发时就会报错!

    存在问题:
    1.只能在IE里用,没有实现跨浏览器。
    2.在拖动过程中如果鼠标快速移动,就会移出到被拖动层的外面,这时如果松开鼠标,没有清空onmousemove事件,所以当鼠标指向时就会跟着鼠标移动。
  • 相关阅读:
    bzoj3295
    bzoj1135
    [luoguP1328] 生活大爆炸版石头剪刀布(模拟)
    考后总结
    [luoguP1970] 花匠(DP)
    [POJ3463] Sightseeing(次短路 Heap + Dijkstra)
    [luoguP2885] [USACO07NOV]电话线Telephone Wire(DP + 贪心)
    [luoguP2709] 小B的询问(莫队)
    [luoguP1972] [SDOI2009]HH的项链(莫队 || 树状数组 || 主席树)
    [luoguP2617] Dynamic Ranking(树状数组 套 主席树 + 离散化)
  • 原文地址:https://www.cnblogs.com/interboy/p/734642.html
Copyright © 2011-2022 走看看