jquery - 如何使用 jquery 添加拖放 div?
问题描述
我想制作像看板模板这样的 html 页面。html 页面中有 Todo、Doing 和 Done 列列表。并且用户可以将 div 移动到此列表下的另一个列列表。但是我无法使用 jquery 拖放 div 组件。javascript代码或其他有问题吗?如果给出一个想法,我会非常高兴。先感谢您..
$(function() {
var kanbanCol = $('.panel-body');
kanbanCol.css('max-height', (window.innerHeight - 150) + 'px');
var kanbanColCount = parseInt(kanbanCol.length);
$('.container-fluid').css('min-width', (kanbanColCount * 350) + 'px');
draggableInit();
$('.panel-heading').click(function() {
var $panelBody = $(this).parent().children('.panel-body');
$panelBody.slideToggle();
});
});
function draggableInit() {
var sourceId;
$('[draggable=true]').bind('dragstart', function(event) {
sourceId = $(this).parent().attr('id');
event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
});
$('.panel-body').bind('dragover', function(event) {
event.preventDefault();
});
$('.panel-body').bind('drop', function(event) {
var children = $(this).children();
var targetId = children.attr('id');
if (sourceId != targetId) {
var elementId = event.originalEvent.dataTransfer.getData("text/plain");
$('#processing-modal').modal('toggle'); //before post
// Post data
setTimeout(function() {
var element = document.getElementById(elementId);
children.prepend(element);
$('#processing-modal').modal('toggle'); // after post
}, 1000);
}
event.preventDefault();
});
<div class="container-fluid">
<div id="sortableKanbanBoards" class="row">
<div class="panel panel-primary kanban-col">
<div class="panel-heading">
TODO
<i class="fa fa-2x fa-plus-circle pull-right"></i>
</div>
<div class="panel-body">
<div id="TODO" class="kanban-centered">
<article class="kanban-entry grab" id="item1" draggable="true">
<div class="kanban-entry-inner">
<div class="kanban-label">
<h2><a href="#">Art Ramadani 1</a></h2>
<p>Tolerably earnestly middleton extremely distrusts she boy now not.</p>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="panel panel-primary kanban-col">
<div class="panel-heading">
DOING
<i class="fa fa-2x fa-plus-circle pull-right"></i>
</div>
<div class="panel-body">
<div id="DOING" class="kanban-centered">
<article class="kanban-entry grab" id="item2" draggable="true">
<div class="kanban-entry-inner">
<div class="kanban-label">
<h2><a href="#">Art Ramadani 2</a></h2>
<p>Tolerably earnestly middleton extremely distrusts she boy now not.</p>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="panel panel-primary kanban-col">
<div class="panel-heading">
DONE
<i class="fa fa-2x fa-plus-circle pull-right"></i>
</div>
<div class="panel-body">
<div id="DONE" class="kanban-centered">
<article class="kanban-entry grab" id="item3" draggable="true">
<div class="kanban-entry-inner">
<div class="kanban-label">
<h2><a href="#">Art Ramadani 3</a></h2>
<p>Tolerably earnestly middleton extremely distrusts she boy now not.</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="modal modal-static fade" id="processing-modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center">
<i class="fa fa-refresh fa-5x fa-spin"></i>
<h4>Processing...</h4>
</div>
</div>
</div>
</div>
</div>
解决方案
我认为您只是在寻找类似的东西,供您 参考
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</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>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</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() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<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>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>
推荐阅读
- python - keras TimeseriesGenerator 函数的维度问题 + 如何将生成器转换为包含所有数据的单个对象
- python - 这个 python 程序应该检查匹配的字符串,但是在三个错误的输入之后,编程没有终止
- java - 打印 ArrayList 中的对象
- javascript - 使用类的构造函数初始化另一个类
- python - 运行 makemigrations 时出现 ModuleNotFoundError
- javascript - METAR 的正则表达式
- opengl-es - 如果我可以使用任何操作来检查 GLSL int 精度是否与声明的精度匹配,该怎么办?
- openapi - swagger 客户端中的对象图
- r - 更改 k 的集群顺序意味着结果
- android - 如何像在 capitalistGame 中一样在进度条上创建动画?