zoukankan      html  css  js  c++  java
  • drag element

    <div id="logDiv" draggable="true" style="border: 2px dotted red;  100%; height: 30%; z-index: 10000; box-sizing: border-box; top: 60%; position: absolute; overflow-y: scroll; -webkit-user-drag: element;" class=""></div>
                        that.logDiv.addEventListener('dragstart',that._start,true);
                        that.logDiv.addEventListener('touchstart',that._start,false);
    
    
                        that.logDiv.addEventListener('drag',that._drag.bind(that),false);
                        that.logDiv.addEventListener('touchmove',that._drag.bind(that),false);
    
                        that.logDiv.addEventListener('dragend',that._end.bind(that),false);
                        that.logDiv.addEventListener('touchend',that._end.bind(that),false);
    
    
                        that.logDiv.addEventListener('click',that._click.bind(that),true);

    demo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
    
      <div id="container">
      <div id="div1"></div>
      </div>
    </body>
    </html>
    #div1{
      width:20px;
      height:20px;
      border:1px solid red;
      margin-left:10px;
      margin-top:10px;
      position:absolute;
    }
    
    #container
    {
      border:1px solid black;
      margin-top:10px;
      margin-left:10px;
      position:relative;
    }
    
    body{
      margin:0 0 0 0;
      padding:0 0 0 0;
      
    }
    window.start=0;
    var div1=document.getElementById('div1');
    div1.addEventListener('mousedown',function(evnt){
      
     window.start=1;
      evnt=evnt||window.event;
            window.x=parseInt(evnt.clientX);
            window.y=parseInt(evnt.clientY);
      
      window.dx=x-div1.offsetLeft;
      window.dy=y-div1.offsetTop;
      
    },true);
    
    
    
    document.addEventListener('mousemove',function(evnt){
    
    if(window.start)
      {
           div1.style.left= evnt.clientX - window.dx +"px";
       div1.style.top= evnt.clientY -window.dy +"px";
      }
    
        
    
      
      
    },true);
    
    
    
    document.addEventListener('mouseup',function(event){
        window.start = 0;
    },true);

    https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

    https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html

    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511

    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW24

    JS Bin on jsbin.com

  • 相关阅读:
    linux 短信收发
    sama5d3 环境检测 adc测试
    【Codeforces 723C】Polycarp at the Radio 贪心
    【Codeforces 723B】Text Document Analysis 模拟
    【USACO 2.2】Preface Numbering (找规律)
    【Codeforces 722C】Destroying Array (数据结构、set)
    【USACO 2.1】Hamming Codes
    【USACO 2.1】Healthy Holsteins
    【USACO 2.1】Sorting A Three-Valued Sequence
    【USACO 2.1】Ordered Fractions
  • 原文地址:https://www.cnblogs.com/zyip/p/4751827.html
Copyright © 2011-2022 走看看