'drag n drop'を特色とするwebappのフロントエンドスタック

私は何年も後にウェブ開発に戻る。私はjQueryが来る前にウェブ開発をしました。'drag n drop'を特色とするwebappのフロントエンドスタック

ここから私はたくさんのフレームワークを選択します。私はWebフレームワーク（aurelia、emberなど）とWebデザインフレームワーク（ブートストラップ、基礎など）を見ています。

私の仕事は、ワークフローを構築するための特定のドラッグアンドドロップユーザーインターフェイスを提供するWebアプリケーションのテクノロジオプションが狭すぎます。ドラッグのために

nは私が見てきた、使用されず、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

'drag n drop'を特色とするwebappのフロントエンドスタック

答えて

関連する問題