2. 程式人生 > >對頁面某個節點的拖曳（原生js和vue專案）

對頁面某個節點的拖曳（原生js和vue專案）

阿新 • • 發佈：2018-12-03
HTML5中的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>

相關推薦

對頁面某個節點的拖曳（原生js和vue專案）

HTML5中的draggable draggable 屬性規定元素是否可拖動（連結和影象預設是可拖動的。） /// true:規定元素是可拖動的,false:規定元素是不可拖動的,auto:使用瀏覽器的預設特性。 <element draggable="true|false|a

表格隔行變色功能（原生JS和jequery 程式碼）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

跨域問題相關知識詳解（原生js和jquery兩種方法實現jsonp跨域）

syn con 加載 developer 兩種方法 ray exe 編寫 分組 1、同源策略 同源策略（Same origin policy），它是由Netscape提出的一個著名的安全策略。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽

移動端滑動條（原生JS）

顏色 empty || 原生 pre border relative innerhtml 課程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

jsonp跨域寫淘寶搜索聯想詞（原生js）

div 註意 abs scrip 基礎 屬性 體驗 blur ext 一、主體 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=

地址的三級聯動（原生js）

html： <select name="provlevel" id="provlevel" style="width: 120px;height:30px;"> <option>--請選擇省份--</option></select><select

js複製、貼上到瀏覽器（原生、IE不相容）

一、最近有需求需要複製圖片（Ctrl+C）到瀏覽器進行貼上（Ctrl+V）然後進行貼上的內容上傳到伺服器，因以前上傳檔案都是通過外掛來進行實現，所以並沒有做過多的學習，以下程式碼是基於其他網友文章中提供的內容，主要程式碼也已經做了部分的註釋，如果不滿足需求，大可

Ajax練習二（原生JS非同步請求）

(二)JS非同步請求   這裡我使用的編譯器是WebStorm（不管用哪個編譯器我們的最終結果都是一樣的就是要請求後臺的資料，隨後將後臺返回的結果展示在介面中），後臺的配置請參考Ajax練習一（配置J

className相同的多個元素分別設定監聽事件（原生JS實現）

JS使用for迴圈動態生成多個div，HTML大概是這樣： <div class='title'> y </div> <div class='title'> i </div> <div class='title'> x &l

JS如何實現在頁面上快速定位（錨點跳轉問題）

本文介紹了JS如何實現在頁面上快速定位（錨點跳轉問題），分享給大家，具體如下： 1. 錨點跳轉簡介 錨點其實就是可以讓頁面定位到某個位置上的點。在高度較高的頁面中經常見到。 錨點跳轉有兩種形式： a標籤 + name / href 屬性 使用標籤的id屬性 在html 4.0

省市區聯動（原生js實現）

<!DOCTYPE html> <head> <title> 三級聯動 </title> <meta charset="utf-8"> </head> <bod

簡單的選項卡製作（原生JS）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> div{ width: 100p

3377加減乘除等於24（原生js實現）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> </head> <body> </body>

子節點修改父節點樣式(原生js和jquery)

<div id="parent"> 父標籤 <div id="children"> 子標籤 </div> </div> 一、原生js 只要獲取子節點物件，然後對其父節點的

forEach方法（原生js學習）

作用就是為陣列的每一項元素，都執行一次傳入的函式。 傳入的函式可帶三個引數，依次為item，index和arr，這個順序嚴格不能變換。item指代陣列的元素，index指代陣列元素的序列，arr指代陣列本身。 var arr=[{ name:"cute" },{name:"murphy"},{name:"c

（原生JS） 圖片無縫滾動、圖片轉化、輪播圖、摺疊效果

1.圖片無縫滾動（原生JS）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無縫滾動</title&g

ASP.NET Repeater實現全選反選（原生JS）

ASPX： <input id="checkAll" name="checkAll" type="checkbox" checked="checked" onclick="ToggleChe

原生js和jQuery實現頁面跳轉的學習

js的實現 1.window.location.href方式     <script language="javascript" type="text/javascript">

將ajax請求封裝為一個物件（原生js）

var AjaxUtil = { // 預設基礎選項 options : { method : "get", //預設提交的方法 url : "", //請求的路徑 required params : {}, //請求的引數 type : 'text',

js和vue方法的相互呼叫（iframe父子頁面的方法相互呼叫）。

專案是前後端不分離的，模板引擎使用的JSP。 但是使用了Vue+ElementUI，這裡列舉一些常用的呼叫方式，有時候可能。 在js裡呼叫vue方法 我們需要把方法註冊到vue物件之外的頁面，所以對與在methods中定義的方法，需要在mounted中註冊給window。之後我們可以在js裡直接呼叫， 在v