jsPlumb（4）-元素拖放

Lowky 發布于2019-08-21 10:42 / 1992人閱讀

摘要：使用的一個普通的特性就是元素的拖放。拖拽內嵌元素拖拽多個元素拖拽時文本選中瀏覽器默認的拖拽行為是選擇里的元素。廢止了這種行為，沒有。為了支持這種情況，被拖拽元素都增加了這個類。在拖拽結束后被去除。

使用jsPlumb的一個普通的特性就是元素的拖放。方法如下：
myInstanceOfJsPlumb.draggable("elementId");

接受的參數類型

元素id的字符串

元素

list類型對象，內容是元素或字符串
舉個栗子

數組
jsPlumbInstance.draggable(["elementOne", "elementTwo"]);

jQuery選擇器
jsPlumbInstance.draggable($(".someClass"));

節點列表

var els = document.querySelectorAll(".someClass");
jsPlumbInstance.draggable(els);

可選項

如果你真的不能使用 jsPlumb.draggable，那你就不得不通過jsPlumb.repaint手動處理。
jsPlumb是jsPlumbInstance類的一個實例。如果你使用自己的實例，確保你調用的是這些實例的拖放方法，而不是全局的。

如果你是用的是vanilla jsPlumb，它提供一個打包好的庫叫Katavorio——提供多種拖放方式。

需要的CSS

你必須把你要設置可拖放的元素設置為position:absolute。

not finished

拖拽容器

使容器內的內容也可以拖拽。

jQuery：

jsPlumb.draggable($("someSelector"), {
  containment:"parent"
});

Vanilla

jsPlumb.draggable("someElement", {
   containment:true
});

not finished

拖拽內嵌元素

not finished

拖拽多個元素

not finished

拖拽時文本選中

瀏覽器默認的拖拽行為是選擇DOM里的元素。jQuery廢止了這種行為，vanilla jsPlumb沒有。為了支持這種情況，被拖拽元素都增加了_jsPlumb_drag_select這個類。

在拖拽結束后被去除。

內容如下：

._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86039.html

jsPlumb（3）-基本概念

摘要：介紹是用來連接元素的，所以核心是，其中又分為以下四個概念一個和某個相關元素的位置。有四種類型貝塞爾曲線直線流程圖狀態機。一個由兩個一個，可有可無。每個有一個關聯的。的公共只有和，創建和配置。但是你需要熟悉其內部的的概念。介紹 jsPlumb是用來連接元素的，所以核心是Connection，其中又分為以下四個概念： Anchor 一個和某個相關元素的位置。你不能創建它們，非可視化，只...

tulayang 2019-08-21 10:42 評論0 收藏0
jsPlumb（1） - 開始使用

摘要：社區版本為開發者在他們的網頁上提供可視化的元素連接。在現代的瀏覽器使用，在和以下版本使用。建議用戶自己設置。到目前為止，一個在每個終點都有，在中間有一個標簽，添加四個元素，實際添加的元素取決于渲染器使用的是還是。 jsPlumb jsPlumb社區版本為開發者在他們的網頁上提供可視化的元素連接。在現代的瀏覽器使用SVG，在IE8和以下版本使用VML。 jsPlumb沒有額外的依賴。 ...

LoftySoul 2019-08-21 10:42 評論0 收藏0
記一次繪圖框架技術選型: jsPlumb VS mxGraph

摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

longmon 2019-08-23 15:36 評論0 收藏0
記一次繪圖框架技術選型: jsPlumb VS mxGraph

摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

channg 2019-08-02 14:23 評論0 收藏0
jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成節點，節點雙擊展示更多信息，節點連線，刪除節點，刪除連線，重繪連接圖，當前頁面刷新連接圖，根據畫連接圖等功能本章主要講拖拽生成節點獲取鏈接圖的信息引入需要的文件因為要用所以引入了畫連接圖用因為用的所以這樣引入拖基于vue的jsplumb，支持拖拽生成節點，節點雙擊展示更多信息，節點連線，刪除節點，刪除連線，重繪連接圖，當前頁面刷新連接圖，根據json畫連接圖等功能...

Imfan 2019-08-02 16:03 評論0 收藏0