webapp应用程序的前端堆栈，其特点是“拖n放”
webapp应用程序的前端堆栈，其特点是“拖n放”
提问于 2017-07-07 16:43:33
多年后，我又回到了web开发领域。在jQuery出现之前，我做过web开发。
现在我看到有很多框架可供选择。我看到了web框架(aurelia，ember等)，然后是web设计框架(bootstrap，foundation等)。
我手头的任务是缩小web应用程序的技术选择范围，它将提供特定的拖放用户界面来构建工作流程。
对于drag n drop，我已经看到，没有使用过，dragulla和interact.js
但由于没有亲身体验，我处于一种困惑的状态。目前唯一确定的是后端将是Django。
你能在这里提供一些指导吗？我主要关心的是流畅的拖放体验的能力。我还想保存流的状态，它是通过将对象放在画布上来设计的，以保持工作流的可视化表示。
干杯
回答 1
Stack Overflow用户
发布于 2017-07-07 16:48:14
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44966375
复制相关文章
相似问题
腾讯云开发者
