ページのノードのドラッグ(オリジナルjsとvueプロジェクト)

32101 ワード

HTML 5のdraggable
draggableプロパティは、要素がドラッグ可能かどうかを指定します(リンクと画像はデフォルトでドラッグ可能です).
/// true:         ,false:          ,auto:          。
<element draggable="true|false|auto">

ドラッグ&ドロップ中に次のイベントがトリガーされます.
  • ドラッグターゲットでイベント(ソース要素):
  • をトリガー
  • ondragstart-ユーザが要素のドラッグを開始すると
  • がトリガーされる.
  • ondrag-要素がドラッグ中に
  • がトリガーされます.
  • ondragend-ユーザーが要素のドラッグを完了すると
  • がトリガーされます.
    ターゲットの解放時にトリガーされるイベント:
  • ondragenter-マウスでドラッグするオブジェクトがコンテナの範囲内に入ると、このイベント
  • がトリガーされます.
  • ondragover-ドラッグするオブジェクトが別のオブジェクトコンテナの範囲内でドラッグすると、このイベント
  • がトリガーされます.
  • ondragleave-このイベントは、マウスによってドラッグするオブジェクトがコンテナの範囲から離れるとトリガーされます
  • .
  • ondrop-ドラッグ中にマウスボタンを離すと、このイベント
  • がトリガーされます.
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ondrag    </title>
    <style>
    .droptarget {
        float: left; 
        width: 100px; 
        height: 35px;
        margin: 15px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
    </style>
    </head>
    <body>                                                                                                                                                                        <p>            p   :</p>
    <div class="droptarget">
    	<p draggable="true" id="dragtarget">  !!!</p>
    </div>
    <div class="droptarget"></div>
    <p style="clear:both;"><strong></strong>Internet Explorer 8     IE     Safari 5.1              drag   。</p>
    <p id="demo"></p>
    <script>
    ///*      */
    document.addEventListener("dragstart", function(event) {
        //dataTransfer.setData()              
        event.dataTransfer.setData("Text", event.target.id);
        //    p          
        document.getElementById("demo").innerHTML = "     p   .";    
        //          
        event.target.style.opacity = "0.4";
    });
    //   p     ,         
    document.addEventListener("drag", function(event) {
        document.getElementById("demo").style.color = "red";
    });
    //    p                
    document.addEventListener("dragend", function(event) {
        document.getElementById("demo").innerHTML = "   p      ";
        event.target.style.opacity = "1";
    });
    /*         */
    //  p        droptarget,  div     
    document.addEventListener("dragenter", function(event) {
        if ( event.target.className == "droptarget" ) {
            event.target.style.border = "3px dotted red";
        }
    });
    //      ,  /             。  drop             
    document.addEventListener("dragover", function(event) {
        event.preventDefault();
    });
    //      p    droptarget,  div     
    document.addEventListener("dragleave", function(event) {
        if ( event.target.className == "droptarget" ) {
            event.target.style.border = "";
        }
    });
    
    document.addEventListener("drop", function(event) {
        event.preventDefault();
        if ( event.target.className == "droptarget" ) {
            document.getElementById("demo").style.color = "";
            event.target.style.border = "";
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
        }
    });
    </script>                                                                                                                  
    </body>
    </html>
    

    vueプロジェクトのVue.Draggable
    1.インストール
    npm install vuedraggable
    2.導入
    import draggable from ‘vuedraggable’
    3.登録
    components:{ draggable }
    4.使用
    <draggable v-model="itemlis" 
    
    //      
    :move="getdata" 
    @update="datadragEnd"
    
    //     
    :options="{animation: 60,handle:'.drag-icon'}"
    >
                   <transition-group>
                       <el-row class="album-list-list-item" v-for="(item,index) in itemlis" :key="item.id">
                           <el-col :span="13">
                               <div class="grid-content ">
                                   <i class="icon drag-icon iconfont icon-Icon-tuozhuai"></i>
                                   <el-checkbox v-model="item.checked" :value="item.id"></el-checkbox> <span class="album-info-net">{{item.net}}</span>
                               </div>
                           </el-col>
                           <el-col :span="4">
                               <div class="grid-content ">
                                   <span>{{item.time}}</span>
                               </div>
                           </el-col>
                           <el-col :span="4">
    
    
                               <el-popover
                                       placement="left-start"
                                       visible-arrow=false
                                       width="120"
                                       trigger="hover"
                               >
                                   <div class="code-img">
                                       <img src="../assets/images/1.png"/>
                                   </div>
                                   <span slot="reference">{{item.wqcode}}</span>
                               </el-popover>
    
                           </el-col>
    
                           <el-col :span="3">
                               <div class="grid-content album-l-l-tool ">
                                   <div class="more-tip-op">
                                       <el-dropdown>
                                           <span class="el-dropdown-link"><em class="el-icon-more"></em></span>
                                           <el-dropdown-menu slot="dropdown" >
                                               <el-dropdown-item :data-url="item.opUrl.removeUrl" @click.native="moveTo(item,$event)">  </el-dropdown-item>
                                               <el-dropdown-item :data-url="item.opUrl.copyUrl" @click.native="copyTo(item,$event)">  </el-dropdown-item>
                                               <el-dropdown-item @click.native="itemDel(index,$event)" :data-url="item.opUrl.delUrl">   </el-dropdown-item>
                                               <el-dropdown-item :data-url="item.opUrl.exportUrl">  </el-dropdown-item>
                                               <el-dropdown-item :data-url="item.opUrl.editName" @click.native="getEditDialog(item,$event)">  </el-dropdown-item>
                                               <el-dropdown-item @click.native="getCodeDialog(item,$event)" >     </el-dropdown-item>
    
                                           </el-dropdown-menu>
                                       </el-dropdown>
                                   </div>
                               </div>
                           </el-col>
                       </el-row>
                   </transition-group>
               </draggable>