bob体育官方平台
前端学习随记の拖拽(三)HTML5篇

首先,要把茶青图层的position属性别变化为abosulte,之后在jquery脚本要贯彻的工作要点,是分别click与mousedown+mouseup这风流倜傥对动作,因为click本来就也就是mousedown+mouseup,然而辛亏,mousedown风流倜傥段时间时候,立刻unbind清空图层对cilck动作的绑定,告诉系统,mousedown之后的动作与click无关,见如下现实代码:复制代码 代码如下:

vmousemove:处理touchmove 也许 mousemove 的科班的风浪

HTML5在此之前,要促成网页成分的拖放操作,须要信赖mousedown、mousemove、mouseup等API,通过多量的JS代码来兑现;HTML5中引进了直白扶植拖放操作的API,大大简化了网页成分的拖放操作编制程序难度,而且这几个API除了援助浏览器内部因素的拖放外,同一时常候援救浏览器和其余应用程序之间的多寡人机联作拖动。

于是,有人提议抗议了,可以用jquery ui中的.draggable(卡塔尔(英语:State of Qatar)与jquerymobile中的swipe事件,实在html5中的拖拽事件啊!

 Understanding the jQuery Mobile API    $.ready{ $.bind("taphold", function.html; }); });     Header    Tap and hold test   

bob体育官方平台,HTML5篇是拖拽学习的结尾风姿浪漫篇了,O(∩_∩)O哈哈bob体育app,~。!

参照传送门:http://www.cnblogs.com/fsjohnhuang/p/3961066.html#t3,那位猿依然很有意志的,介绍的很详细啊,下了大素养啊(__) 嘻嘻……。

源代码传送门:https://github.com/WZOnePiece/study-draggable

而是,上述全数的缓和方案都以弄巧成拙,

虚构鼠标事件咱俩提供了豆蔻梢头层层"虚构的"鼠标事件试图把鼠标和触摸事件抽象 出来。那使得开拓者能够给意气风发部分根底的鼠标事件,比如mousedown, mousemove, mouseup, 和click来注册监听。插件会在触摸景况中,插件会保持在金钱观鼠标蒙受下接触的生机勃勃大器晚成,比如:vmouseup总是在vmousedown从前被触发,vmousedown总是在 vmouseup 此前,等等。设想鼠标事件也会把书剑中放出的坐标信息标准化。所以在依据触摸的配备中事件目的的pageX, pageY, screenX, screenY, clientX, and clientY那几个属性的坐标都足以用。

粗略例子:##

<!DOCTYPE html>
<html>
 <head>
  <title>实现HTML5中的拖拽效果</title>
  <meta charset="utf-8"/>
  <meta name='author' content='NARUTOne'>
  <style>
    #d1 {
        width : 300px;
        height : 300px;
        border : solid 1px black;
        float : left;
    }
    #d2 {
        width : 300px;
        height : 300px;
        border : solid 1px black;
        float : right;
    }
  </style>
 </head>

 <body>
    <!-- 用于显示源元素(DATA文件夹) -->
    <div id="d1">
        <p>源元素</p>
        <!-- 将该图片作为源元素 -->
        [站外图片上传中……(3)]</img>
    </div>
    <!-- 用于显示目标元素(PROJECT文件夹) -->
    <div id="d2">
        <p>目标元素</p>
    </div>
  <script>
      // 1. 获取源元素 - 图片元素
      var ele1 = document.getElementById("myimg");
      var d1 = document.getElementById("d1");
      // 2. 获取目标元素 - id为d2的div元素
      var d2 = document.getElementById("d2");
      // 3. 源元素事件 - dragstart事件
      ele1.addEventListener("dragstart",function(event){
          // a. 获取到源元素使用的数据 - src属性值
          var mysrc = ele1.src;
          console.log(mysrc);
          // b. 将数据设置到dataTransfer对象中
          event.dataTransfer.setData("text",mysrc);//text,指数据类型type
      });

      // 4. 目标元素事件 - drop事件;自定义处理拖放过程
      d2.addEventListener("drop",function(event){
          // a. 阻止页面的默认行为
          event.preventDefault();
          // b. 从dataTransfer对象得到数据
          var mysrc = event.dataTransfer.getData("text");//返回指定type的数据
          // c. 创建<img>元素,设置一些属性
          var myimg = document.createElement("img");
          myimg.src = mysrc;
      myimg.id = 'myimg';
          myimg.width = "200";

          // f. 将源元素从页面中删除
      var removeElem = document.getElementById('myimg');
          d1.removeChild(removeElem);
      // d. 将<img>元素添加到id为d2的div元素中
      d2.appendChild(myimg);
      // e. 清除dataTransfer对象中的数据内容
      event.dataTransfer.clearData("text");
      });
      /*
       * dragover和dragleave事件
       * * dragover - 源元素到达目标元素
       * * dragleave - 源元素离开目标元素
       * * 上述两个事件组合效果 - 拖拽效果
       * drop事件
       * * 完成逻辑
       */
      d2.addEventListener("dragover",function(){
          event.preventDefault();
      });
      d2.addEventListener("dragleave",function(){
          event.preventDefault();
      });

//d1作为目标元素
    d1.addEventListener("drop",function(event){
      event.preventDefault();
      // b. 从dataTransfer对象得到数据
      var mysrc = event.dataTransfer.getData("text");
      // c. 创建<img>元素,设置一些属性
      var myimg = document.createElement("img");
      myimg.src = mysrc;
      myimg.width = "200";
      myimg.id = 'myimg';
      // f. 将源元素从页面中删除

      var removeElem = document.getElementById('myimg');
      d2.removeChild(removeElem);

      d1.appendChild(myimg);
      event.dataTransfer.clearData("text");
    });

    d1.addEventListener("dragover",function(){
      event.preventDefault();
    });
    d1.addEventListener("dragleave",function(){
      event.preventDefault();
    });
      /*
      setDragImage()用于在拖放过程中,修改鼠标指针所指向的图像
          event.dataTransfer.setDragImage(image,x,y);
          event.target;返回触发事件的元素(事件的目标节点)
      */
  </script>
 </body>
</html>

成效图,不过特别倒霉看(✿◡‿◡卡塔尔(قطر‎:

bob体育官方平台 1

bob体育官方平台 2

HTML5是存在包容性难题的,则drag and drop (DnD卡塔尔也许有包容性难点的。例:IE6-7在dataTransfer对象存在包容性难点。具体的宽容难点,依旧须要实际难题具体解除了!
假如猿(媛)们想要通晓进一步切实的HTML5拖拽难题和技艺,笔者提议足以看看作品初步的参照他事他说加以考察链接里面包车型地铁稿子,写的依旧很好的。笔者当然想多借鉴下,写写小说什么的,动脑依旧算了(__卡塔尔(قطر‎嘻嘻……。究竟人家找资料计算也是不易于呀。

期待本文所述对我们的jquery程序设计有所扶助。

scrollSupressionThreshold – 水平方向拖拽大于这些值,将不接触。durationThreshold – 滑动时间超过那么些数值就不会生出滑动事件。horizontalDistanceThreshold – 水平划动间距抢先那个数值才会时有发生滑动事件。verticalDistanceThreshold – 竖直划动距离小于那一个数值才会爆发滑动事件。swipeleft:划动事件为向左的可行性时接触

相关API##

1、DataTransfer 对象:拖拽对象用来传递的媒婆,使用相仿为Event.dataTransfer。内部方法:

  • setData(type, data卡塔尔:设置被拖数据的数据类型和值;
  • getData(type卡塔尔(英语:State of Qatar):获取拖动数据值;
  • clearData(type卡塔尔(قطر‎:数据废除。

2、 draggable 属性:正是标签元素要安装draggable=true,不然不会有成效,比如:

<div title="拖拽我" draggable="true">列表1</div>

3、ondrag:表示鼠标拖拽的长河,形似于onmousemove。功效在源元素上。

4、ondragstart 事件:当拖拽成分开端被拖拽的时候接触的事件,那一件事件效率在被拖拽元素上(源成分)。

5、ondragenter 事件:当拖曳成分步入目的成分的时候接触的事件,那一件事件成效在对象成分上。

6、ondragover 事件:拖拽成分在指标成分上移动的时候接触的平地风波,那一件事件功用在指标成分上。

7、ondrop 事件:被拖拽的要素在目的成分上同不常候鼠标松开触发的平地风波,那件事件作用在目的成分上。

8、ondragend 事件:当拖拽实现后触发的风云,此事件作用在被拖曳元素上。

9、dragleave事件:源成分离开目的成分,触发该事件。

10、伊芙nt.preventDefault()方法:阻止私下认可的些事件措施等实践。在ondragover中势必要施行preventDefault(卡塔尔(英语:State of Qatar),不然ondrop事件不会被触发。其它,要是是从其余使用软件大概文件中拖东西进去,尤其是图片的时候,私下认可的动作是体现那几个图片或是相关信息,并非实在进行drop。那个时候亟待在目的成分的ondragover事件中把它一直干掉。

11、Event.effectAllowed 属性:正是拖拽的机能,鼠标指针类型,仅能在dragover中装置。

本文实例剖析了jQuery手提式有线电话机浏览器中拖拽动作的艰辛性。分享给我们供大家参谋。具体如下:

vmousecancel:管理touch 恐怕 mouse 的mousecancel的正式的风浪

如上海教室的石榴红图层,写出来也不甚轻易,

vclick:处理touchend 可能 鼠标点击 的正经八百的平地风波。在根据触摸的配备上,那个事件是在vmouseup事件之后触发的。

返回顶部