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

  • 相关阅读:
    xxx.app已损坏,打不开.你应该将它移到废纸篓-已解决
    idea 配置maven一直停留在loading archetype list
    pom.xml 识别xml文件
    idea .defaultMessage
    处理GitHub上的不允许100MB大文件上传
    Makefile 简易教程
    Android:用Intent传送图片
    Android: ListView的使用(列表控件)
    Android: SharedPreferences的简单使用(数据可持久化)
    Andriod:一个Activity向另一个Activity传递数据
  • 原文地址:https://www.cnblogs.com/zyip/p/4751827.html
Copyright © 2011-2022 走看看