应用-拖拽

作者: Dxes | 来源:发表于2019-12-11 00:08 被阅读0次

Html5 + Css 3 文件拖拽上传功能
拖拽上传
拖拽操作
元素拖曳 H5
应用-拖拽
Launcher拖拽框架
JavaScrip--事件应用
Android 拖拽功能研究 —— startDragAndDr
禁止用户拖拽图片或文件到窗口
jqueryUI-draggable-droppable实现多元

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                top: 200px;
                left: 200px;
                position: absolute;
            }
        </style>
        
    </head>
    <body>
        
        <div id="div1" style="background-color: pink; width: 100px; height: 100px;">
            
        </div>
        
        <script type="text/javascript">
            //是否移动
            var isMove = false
            var startX;
            var startY;
            
            //移动的div
            var div1_ = document.getElementById('div1')
            
            
            //鼠标按下
            div1_.onmousedown = function(evt){
                
                isMove = true
                startX = evt.offsetX
                startY = evt.offsetY
                console.log('按下.....', startX, startY)
            }
            
            //鼠标弹起
            div1_.onmouseup = function(){
                isMove = false
            }
            
            //鼠标移动
            div1_.onmousemove = function(evt){
                if(!isMove){
                    return;
                }
                //isMove是true的是才移动
                var top1 = evt.clientY - startY;
                var left1 = evt.clientX - startX;
                console.log('top:'+top1+' left:'+left1);
                this.style.top = top1+'px';
                this.style.left = left1+'px';
            }
            
            
            
            
        </script>
        
    </body>
</html>