前端堆棧爲特色的'拖ñ下降'的webapp

多年後，我回到網站開發。我在jQuery出現之前做了web開發。前端堆棧爲特色的'拖ñ下降'的webapp

現在我看到很多框架可供選擇。我看到了web框架（aurelia，ember等），然後是web設計框架（bootstrap，foundation等）。

我手頭的任務過於狹窄下來一個web應用程序將提供一定的拖放用戶界面，以構建工作流的技術選擇。

對於拖ñ下降我見過，沒用過，dragulla和interact.js

但沒有經驗動手我在一個混亂的狀態。目前唯一確定的就是將要成爲Django的後端。

能否請您在這裏提供一些指導？我主要關心的是做出平滑拖放體驗的能力。我還想保存通過在畫布上放置對象設計的流的狀態，以保持工作流的可視化表示。

乾杯

來源

2017-07-07 O. Shah

一種簡單和基本的拖放功能由jquery ui draggable提供。

你可以看到它是多麼簡單的實現：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Draggable + Sortable</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } 
    li { margin: 5px; padding: 5px; width: 150px; } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#sortable").sortable({ 
     revert: true 
    }); 
    $("#draggable").draggable({ 
     connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "invalid" 
    }); 
    $("ul, li").disableSelection(); 
    }); 
    </script> 
</head> 
<body> 

<ul> 
    <li id="draggable" class="ui-state-highlight">Drag me down</li> 
</ul> 

<ul id="sortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 


</body> 
</html>

來源

2017-07-07 08:48:14 gianpara

前端堆棧爲特色的'拖ñ下降'的webapp

回答

相關問題