2. 程式人生 > >探討把一個元素從它所在的div 拖動到另一個div內的實現方法

探討把一個元素從它所在的div 拖動到另一個div內的實現方法

阿新 • • 發佈：2018-11-29

故事背景：

      接到一個新需求，要求用vue搞，主要是拖動實現佈局，關鍵點有：單個元件拖動，一行多列裡面的元件拖動，  單個元件可以拖入一行多列裡， 單個元件的拖動好實現，關鍵是把一個元件拖動到另一個類似於表格裡面，而且有的情況下還需要限制拖動只能在水平方向，自己蒐集資料， 實驗，終於搞出來了。

原理上主要分為兩類：

  1. HTML5自帶的拖放api，可用的庫有 : Vue.Draggable  
  2. 使用js 監聽滑鼠的移動位置, 可用的庫有:  jquery ui
  3. 使用point-event: none（下面會詳細說明）

各自缺點

H5拖動的缺點：不能限制在水平 或垂直方向上拖動。

使用原生js缺點：大量的dom操作，程式碼複雜（jquery ui 封裝的比較好了，可直接用）

但是問題來了，這次的需求是把基於jquery ui 的拖動 用 vue 重構，那麼用vue.draggable吧， 但是需求里正好有一條是要限制在水平方向上拖動，尷尬，用不了。

尋找方案

最開始的嘗試：

<!DOCTYPE html>
<html>
<head>
	<title>vue結合原生js實現拖動</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"
 
></script>
</head>
<body>
<div id="app">
<div class="ctn ctn1">
	<div class="sub sub1" v-for="(site, index) in list1">
   	  <div class="dragCtn fixed" :style="{ left: X+'px', top: Y+'px'}"
           @mousedown="mousedown(site, $event)"
           @mousemove.prevent='mousemove(site, $event)'
 

           @mouseup='mouseup(site, $event)'>
   	  	拖動我
   	  </div>
   </div>
</div>

<div class="ctn ctn2">
	<div class="sub sub2" v-for="(site, index) in list2"
          @mouseenter='mouseenter(site, $event)'>
   	  <div class="dragCtn">
   	  	{{ index }} : {{ site.name }}
   	  </div>
   </div>
</div>
   
</div>

<script>
new Vue({
  el: '#app',
  data: {
    list1: [{name:1, index:0}],
    list2: [{name:'a', index:0}, {name:'b', index:1}, {name:'c', index: 2}, {name:'d', index: 3}],
    vm:'',
    sb_bkx: 0,
    sb_bky: 0,
    is_moving: false,
    X: 0,
    Y: 0
  },
  methods: {
  	mousedown: function (site, event) {
		var startx=event.x;
		var starty=event.y;
		this.sb_bkx=startx - event.target.offsetLeft;
		this.sb_bky=starty - event.target.offsetTop;
		this.is_moving = true;
  	},
  	mousemove: function (site, event) {
  		var endx=event.x - this.sb_bkx;
		  var endy=event.y - this.sb_bky;
		  var _this = this
		  if(this.is_moving){
	    	this.X = endx;
	    	this.Y = endy;
      }
  	},
  	mouseup: function (e) {
  	  this.is_moving = false;
  	},
    mouseenter: function (){
      console.log('滑鼠進入')
    }
  }
})
</script>

<style>
    .ctn{
    	line-height: 50px;
    	cursor: pointer;
    	font-size: 20px;
    	text-align: center;
    	float: left;
    }
    .sub:hover{
        background: #e6dcdc;
        color: white;
        width: 100px;
    }
   	.ctn1{
   		border: 1px solid green;
   		width: 100px;
   	}
   	.ctn2{
   		border: 1px solid black;
   		width: 100px;
   		margin-left: 50px;
   	}
   	.fixed{
   	  width: 100px;
      position: fixed;
      background: red;
      left: 0;
      top: 0;
      cursor: move;
   	}
</style>
</body>
</html>
複製程式碼

就這樣實現了基本的拖動，但是在拖動的時候，就不能觸  mouseenter  事件了，而且滑鼠必須拖動的很慢，移動快一點，拖動的div就跟不上了，這一點到現在還困惑，希望各位大俠指點。然後在網上找了很多資料，類庫，但是不能完全符合我的需求，於是準備自己寫了；

       首先是給元件新增mousedown事件，然後mousemove的時候 監聽滑鼠的位置，再賦值給元件，實現拖動，但是當元件拖動進入另一個元素的時候，無法監聽mouseenter, 後來想的辦法是給正在拖動的元件加上 point-event：none 屬性，就是消除原有的滑鼠事件，就可以觸發其他元件的mouerenter事件了，point-event 屬性的具體用法 可以參考這裡：

www.zhangxinxu.com/wordpress/2…

因為拖動是用原生js寫的，所以可以限制在水平方向拖動，再加上可以觸發mouseenter事件，就正好實現的我的需求。

虛擬碼如下：

mousedown: function (event, site) {        document.onmousemove=function (ev) {          // 移動的時候給元素增加 point-event:none 屬性           
           ...        }        document.onmouseup=function (ev) {
           // up的時候 要移除point-event屬性
           ...         }    }複製程式碼

        但是後來上面要求，要相容ie10，由於 point-event：none 是H5的屬性，於是我趕緊去看看相容性, 可怕的事發生了，point-event 屬性只相容到 ie11，完蛋！

         再想其他辦法吧，沒了思路，老版本的拖動是基於 jquery ui  的 ，於是去看了 jquery ui 的原始碼，看看它的拖動是怎麼實現的。

jquery ui 拖動實現原理

     不熟悉 jquery ui 的拖動方法的可以先看下  這裡   

      看下面這段程式碼：

 $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this ).html( "Dropped!" );
      }
    });
  });複製程式碼

      之前的關鍵問題就是怎麼判斷拖動的元素  $( "#draggable" )  在什麼時候 進入了可以放置的區域      $( "#droppable" ) 的，看了原始碼，它的實現方式 簡單來說就是拖動  $( "#draggable" )  的時候監聽 滑鼠的位置， 同時獲取  $( "#droppable" )   的區域位置資訊，只要滑鼠進入該區域，就觸發。

      順著這個思路，做了實驗 可以滿足自己的需求 good !

      demo的實現效果如下：


程式碼地址： https://github.com/YalongYan/vue-drag-layout

拖動佈局的實現方式應該還有更好的，歡迎大家提出更好的實現方式。



相關推薦

探討把一個元素從它所在的div 拖動到另一個div內的實現方法

故事背景：       接到一個新需求，要求用vue搞，主要是拖動實現佈局，關鍵點有：單個元件拖動，一行多列裡面的元件拖動，  單個元件可以拖入一行多列裡， 單個元件的拖動好實現，關鍵是把一個元件拖動到另一個類似於表格裡面，而且有的情況下還需要限制拖動只能在水平方向，自

怎樣把一個字典的數據添加到另一個字典中？

sdi 數據添加 需求 found omd tina trie rom cti 這種簡單的需求Foundation API就已經完成的很好了。 創建一個包含其他字典的字典:[NSDictionary dictionaryWithDictionary:sourceDict]

讓一個div拖動和讓一個panel拖動加拉大拉小

let sha cli class 事件綁定 borde 設置 scrip script 一、讓一個div拖動 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head

mysql中把一個表的數據批量導入另一個表中(不同情況)

插入 where 並且 導出表 一個表 mys 必須 程序開發 clas mysql中把一個表的數據批量導入另一個表中 不管是在網站開發還是在應用程序開發中，我們經常會碰到需要將MySQL某個表的數據批量導入到另一個表的情況，甚至有時還需要指定導入字段。 本文就將

Halcon從某一個圖片以指定區域繪制到另一個圖像

全部 points span halcon alc 覆蓋 spa angle gen ************************************************************* * Halcon從某一個圖片以指定區域繪制到另一個圖像

Java 把一個文字文件的內容複製到另一個文字文件

src.txt放在工程目錄下，dest.txt可建立，也可不建立。一旦執行程式，如果dest.txt不存在，將自行建立這個文字文件，再將src.txt中的內容複製到dest.txt   1 import java.io.File; 2 import java.io.FileInpu

PullToRefersh、網路獲取資料新增到adapter和資料庫 然後顯示、無網路時從資料庫獲取資料新增到另一個adapter 然後顯示

package liyuanqi.bwie.com.pulltorrfresh; import android.content.Context; import android.net.ConnectivityManager; import android.net

如何用BeanUtils把一個物件中的屬性值複製到另一個物件中和BeanUtils中的方法

場景：當其他系統呼叫我們的一個介面進行一些業務資料的修改，通過介面傳過來一個user物件，但不含有user的uuid，這樣就不能直接儲存達到修改的目的，一般情況下我們先通過tradeCode交易編號找到之前的user，然後通過set方法把新user中的值放入之前的user中然後儲存達到修改目

java.net.BindException: Cannot assign requested address 你所不知道的另一個原因（linux）

轉載：https://blog.csdn.net/zqz_zqz/article/details/79736498 剛剛通過qq幫同事處理了一個客戶執行緒問題，都這麼晚了，還在現場部署應用，真實夠拼的，客戶不能連線外網，不能下載檔案，只能通過手機拍照錯誤日誌排查問題； 問題現象就是tomca

linux下將一個目錄下的所有檔案拷貝到另一個大檔案中，並把大檔案拆分成原來的小檔案，大小，內容，名字不變

經過四五天的編寫與除錯，初步完成了檔案操作工具的內容，以下是程式碼說明： 首先，我測試用的檔案在/home/xudong/mywork下，我的最終生成檔案是在這個路徑下，/home/xudong/work/resultfile.txt，分開後生成的小檔案在/home/xud

從一個MFC工程移植對話方塊類到另一個MFC工程

轉載於：https://blog.csdn.net/wowoandlyn/article/details/2937785         今天碰到模組移植問題了,自己做的對話方塊類(繼承於CDialo

js實現一個可以相容PC端和移動端的div拖動效果

拖動時候用到的三個事件：mousedown、mousemove、mouseup在移動端都不起任何作用。 畢竟移動端是沒有滑鼠的，查資料後發現，在移動端與之相對應的分別是：touchstart、touc

從一個使用者expdp匯出再impdp匯入到另一個使用者

如果想匯入的使用者已經存在:1. 匯出使用者 expdp user1/pass1 directory=dumpdir dumpfile=user1.dmp2. 匯入使用者 impdp user2/pas

jquery 複製元素，並修改屬性,追加到另一個元素後面

 jquery 複製元素，並修改屬性 $('#ID').clone()方法能克隆一個元素 $('#ID').attr('ID', 'NewID'); 修改ID為新的ID名 =======================【舉例】=======================

關於html 中div 填滿另一個div

1.你需要 document.getElementById("str").value 2.onlick 函式和lick 函式 有關於繫結函式的文章 :https://segmentfault.com/q/1010000000332625 2.獲取到空格的東西 ,Angul

關於在一個頁面的div巢狀另一個頁面導致下拉框失效的問題

做後臺管理頁面，在一個主頁面中巢狀另一個頁面，通過主頁面點選不同選單，在頁面另一部分顯示不同的子頁面，知道有兩種方法： 1.使用<iframe>視窗; 2.在主頁面的div裡面巢狀一個子頁面，$("#divId").load("XXX.jsp"). 在用第二個方

merge into 從一個表的一列資料複製到另一個表的一列 oracle 中報ora-30926 無法在源表中獲得穩定的行

2）在merge的時候也遇到一個問題，出現”ORA-30926: 無法在源表中獲得一組穩定的行。“這個問題原因比較簡單，因為在merge into時需要設定一個key值，會根據這個key值來決定merge into的操作（update還是insert into），所以

VisionMobile：從MeeGo到Tizen：製造另一個軟體泡沫

VisionMobile的一篇新文章：From MeeGo to Tizen: the making of another software bubble[在MeeGo誕生短短1年半後，Intel將注意力轉向新平臺Tizen，合作伙伴是三星。客席作者Dave Neary討論Tizen的基礎以及為什麼Mee

mysql資料庫-----從一個表中複製資料和結構到另一個表中

一.從一個表複製結構到另一個表 create table t_emp select * from emp where 1=2; emp表 t_emp表----只複製了emp表的結構 二.從一個表複製結構和資料到另一個 create table t_emp selec

如何用java讀取csv檔案指定行列的資料，並將csv中資料元素隨機置零後儲存到另一個csv檔案中

這個流程可以大致分為兩步驟：1.讀取csv檔案中的資料2.生成隨機數，將csv的資料隨機置零，將新生成的檔案儲存到新的csv中一、首先我們進行第一步：讀取csv中的檔案:讀取函式格式為public static double readin(int row,int col)