H5拖拽元素

拖拽.gif

为了让元素可拖动，需要设置元素的draggable=true属性。
链接和图片默认是可拖动的，不需要 draggable 属性。

在拖动目标上触发事件 (源元素):

  ondragstart - 用户开始拖动元素时触发
  ondrag - 元素正在拖动时触发
  ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

  ondragenter - 当被拖动的对象进入其容器范围内时触发此事件
  ondragover - 当某一个被拖动的对象在另一对象容器范围内拖动时触发此事件
  ondragleave - 当鼠标拖动的对象离开其容器范围内时触发此事件
  ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

html结构

    

        
1
        
2
    
    

css

.one{
        width: 230px;
        height: 122px;
        border:1px solid #dcdcdc;
        display: inline-block;
        padding: 20px;
        font-size:0;
    }
    #one{
        margin: 0 100px 0 0;
        vertical-align: top;
    }
    .one div{
        font-size: 15px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: pink;
        display: inline-block;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        margin:0 10px 10px 0;
    }

js

       var temp = '';//放置被拖拽的对象
       document.addEventListener('dragstart',function(event){
           // 拖拽开始
           temp = event.target;//获取触发事件的元素
           event.target.style.opacity = '0.5';
       },false)
       document.addEventListener('dragend',function(event){
           // 拖拽结束
           event.target.style.opacity = '';
       },false)
       document.addEventListener('dragover',function(event){
           //默认情况下,数据/元素不能在其他元素中被拖放，所以要防止元素的默认处理
           if(event.target.className == 'one'){
               event.preventDefault();
           }
       },false)
       document.addEventListener('drop',function(event){
           event.preventDefault();
           //释放鼠标
           event.target.appendChild( temp );
           event.target.style.borderColor = '';
       },false)
       document.addEventListener('dragenter',function(event){
           // 拖拽对象进入容器范围
           if(event.target.className == 'one'){
               event.target.style.borderColor = 'black';
           }
       },false)
       document.addEventListener('dragleave',function(event){
           //拖拽对象离开容器范围
           if(event.target.className == 'one'){
               event.target.style.borderColor = '';
           }
       },false)