web前端-在迷惘中的探求HTML5(四)HTML5之拖动

web前端-在迷惘中的探求HTML5(四)HTML5之拖动

项目须要,实现八个拖放操作,须求每便能够拖拽选中的多个要素,释放到对象容器后可排序。思量了一下,认为jquery-ui比较合适,终究它提供了花色需求的交互性事件机制。拖拽、释放、排序、选取等成效。而在实际的操作中,遇到个广大的主题素材,说美赞臣下,最终附上效果图和代码。

品种须求,达成三个拖放操作,需要每趟能够拖拽选中的四个因素,释放到对象容器后可排序。思考了一晃,感到jquery-ui比较适合,终归它提供了品种须要的交互性事件机制。拖拽、释放、排序、选择等成效。而在其实的操作中,境遇个广大的主题材料,说澳优(Ausnutria Hyproca)下,最终附上效果图和代码。

在原先的篇章中自个儿已经介绍了web开荒中基本拖放原理,现在交给供给变成的功效。最后运营的职能一般来讲图所示:

html5油不过生了过多相比较好的利用,后天大家来说讲关于成分拖动的。

澳门新萄京8522,1.本人使用的bootstrap框架,引进jquery-ui后,为成分增多拖拽方法后,提醒该格局不是贰个函数。查找原因,是bootstrap和jquery-uide的$
标志符调整权龃龉。在引进的jquery-ui的js前拉长一下语句消除

1.本身使用的bootstrap框架,引进jquery-ui后,为要素增多拖拽方法后,提醒该方式不是多个函数。查找原因,是bootstrap和jquery-uide的$
标记符调控权争辩。在引进的jquery-ui的js前拉长一下语句化解

澳门新萄京8522 1

前言

至于拖动,我们应当了解什么是拖动力源和停放目标?这里上海体育场合表明:

澳门新萄京8522 2

在html5拖放出来在此以前,有过一种原始本人定义来贯彻类似拖动的效应:

  1. 为拖动力源注册鼠标点击事件
  2. 为拖动力源注册鼠标移动事件,判定是或不是先点击过拖动力源,如点击过则成分通过相对定位并紧跟着鼠标移动。
  3. 通过放置目的后将拖动力源对象加载到放置目的的子节点下

这种原来拖动实在是,不说了上代码自个儿看:(请自行准备jquery)

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
 <div id="leftDiv" style="width:300px;height: 300px;float:left;border: 1px solid #f00;">
  <div id="inner" style="width:100px;height: 100px;float:left;background:yellow;"></div>
 </div>
 <div id="rightDiv" style="width:300px;height: 300px;float:left;border: 1px solid #f00;margin-left:300px;"></div>

 <script>
  //鼠标拖拽
  $(function(){
   register();
   var startInner = 0;//0-初始、1-拖拽、2-结束
   var index = 0;
   function register(){
    $('#inner').mousedown(function(event) {
     /* Act on the event */
     index++;
     var $cloneInner = $('#inner').clone();
     $cloneInner.attr('id','cloneInner' + index);
     $cloneInner.css('background', '#000');
     $(document.body).append($cloneInner);
     $cloneInner.css({
      position:'absolute',
      left:event.pageX - event.currentTarget.offsetWidth/2 + 'px',
      top:event.pageY - event.currentTarget.offsetHeight/2 + 'px'
     });
     startInner = 1;
    });
    $(document).on('mousemove', function(event) {
     /* Act on the event */
     if(startInner!=1){
      return;
     }
     var $cloneInner = $('#cloneInner' + index);
     $cloneInner.css({
      // position:'absolute',
      left:event.pageX - $('#inner')[0].offsetWidth/2 + 'px',
      top:event.pageY - $('#inner')[0].offsetHeight/2 + 'px'
     });
    });
    $(document).on('mouseup', function(event) {
     if(startInner!=1){
      return;
     }
     if(event.pageX > $('#rightDiv').offset().left&&event.pageY > $('#rightDiv').offset().top&&event.pageX < $('#rightDiv').offset().left + $('#rightDiv').width()&&event.pageY < $('#rightDiv').offset().top + $('#rightDiv').height()){//event.target.id == 'rightDiv'
      $('#cloneInner' + index).css('position','static');
      $('#cloneInner' + index).css('float','left');
      $('#cloneInner' + index).appendTo($('#rightDiv'));
     }else{
      $('#cloneInner' + index).remove();
     }
     startInner = 2;
    });
   }
  })
 </script>
</body>
</html>

而以后html5的拖放机制:

  1. 应用新扩充的习性设定拖动力源能够拖放
  2. 动用激增的拖放事件,禁止默许行为,传递拖放消息
  3. 选用激增的拖放甘休事件,在实现拖放后改造dom结构

多头一相比,就精晓哪些好

<script>
    jQuery.noConflict();
</script>
<script>
        jQuery.noConflict();
</script>

重中之重作用须要表达: 1.左方的因素结构最终会通过Ajax
call服务器的数量来扭转,能帮助多元成分。父节点可以折叠起来

拖放api

2.jquery-ui的提供了增选操作(单选,多选),个中多选能够按住Ctrl同盟鼠标单击多选,也足以鼠标在三个因素上拖拽举行多选。在为同一元素加多上采取操作和拖拽操作时,出现了难题。

2.jquery-ui的提供了增选操作(单选,多选),在那之中多选能够按住Ctrl合作鼠标单击多选,也能够鼠标在七个要素上拖拽进行多选。在为同一元素增多上选拔操作和拖拽操作时,出现了难题。

2.用户能够经过拖放的操作,将成分从左侧拖放到右臂。借使是拖的父节点成分,那么要求把它子节点的因素一并拖到右侧

拖放属性与对象:

a:多选的操作由于能够在要素上拖拽,与自个儿的拖拽事件有冲突(个人感到鼠标拖拽多选的效用并从未选用shift协作鼠标点击好用)。

a:多选的操作由于能够在要素上拖拽,与自己的拖拽事件有抵触(个人以为鼠标拖拽多选的效应并从未选拔shift协作鼠标点击好用)。

3.成分松开左边,左侧可以承受元素的区域有2种恐怕。一种新建一个区域,就恍如“华西地质大学”所示。别的一种正是拖放到已经有成分的区域。两个的涉嫌是“或”。单个成分区域有“非”和“且”的关联。点击左侧删除开关能够去除节点成分。

draggable 属性

draggable
属性:设置当前因素是不是足以拖放,draggable=true/false,设定为可拖拽后当前因素得以拖拽,可是你感到能够乱放呢?所有通过的区域暗中同意行为集结体你进行停放,你会合到拖动力源上突显叁个不准停放的Logo。

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图