Draggable Widget, Droppable Widget (ok)
PreviousTạo chức năng tự động hoàn tất nhập liệu với thư viện jQuery UI Autocomplete (Phần 1) (ok)NextjQuery drag and drop (kéo thả bằng jQuery)
Last updated
Advanced Javascript
Last updated
Features
Drag able Element
Clone Element
Fit Drop able Area
Revert
Re sizable Element
Double Click Remove Element
Drag able Remove Area
Remove Button
C:\xampp\htdocs\php\stylesheets\style.css
.col {
float: left;
margin: 5px;
padding: 5px;
}
#col1 {
width: 200px;
height: auto;
border: 1px solid black;
}
img.drag {
width: 40px;
height: 40px;
position: relative;
}
#droppable {
width: 350px;
height: 340px;
border: 1px solid black;
}
.right {
float: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
ul li {
list-style: none;
}
.drag-list img {
width: 80px;
vertical-align: middle;
cursor: move;
}
.drag-list ul {
margin: 0;
padding: 0;
}
.drag-list li {
margin-bottom: 5px;
}
.remove-drag-hover {
background-color: #ED4949 !important;
}
.drop-area {
background-color: #afd1b2;
}
.xicon {
margin-top: 4px;
position: absolute;
margin-left: -17px;
color: #FFF;
font: message-box;
text-decoration: none;
}
.xicon:hover {
background-color: #fff;
color: #000;
width: 13px;
height: 20px;
text-align: center;
}
.tip {
font-size: 12px;
clear: both;
}
span img {
width: 100%;
height: 100%;
}C:\xampp\htdocs\php\drop.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true
});
$("#droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
drop: function(e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
cursor: 'move',
//containment: '#droppable',
tolerance: 'fit',
drop: function(event, ui) {
$(ui.draggable).remove();
}
});
x.resizable({
maxHeight: $('#droppable').height(),
maxWidth: $('#droppable').width()
});
x.addClass('remove');
var el = $("<span><a href='Javascript:void(0)' class='xicon delete' title='Remove'>X</a></span>");
$(el).insertAfter($(x.find('img')));
x.appendTo('#droppable');
$('.delete').on('click', function() {
$(this).parent().parent('span').remove();
});
$('.delete').parent().parent('span').dblclick(function() {
$(this).remove();
});
}
}
});
$("#remove-drag").droppable({
drop: function(event, ui) {
$(ui.draggable).remove();
},
hoverClass: "remove-drag-hover",
accept: '.remove'
});
});
</script>
<div id="wrapper">
<div class="col" id="droppable"></div>
<div class="col" id="col1">
<div id="drag-list" class="drag-list">
<ul>
<li>
<span id="drag1" class="drag">
<img src="http://placehold.it/80x80/c9112d/fff&text=1"/>
</span>
<span>Item 1</span>
</li>
<li>
<span id="drag2" class="drag">
<img src="http://placehold.it/80x80/E68500/fff&text=2"/>
</span>
<span>Item 2</span>
</li>
<li>
<span id="drag3" class="drag">
<img src="http://placehold.it/80x80/00810C/fff&text=3"/>
</span>
<span>Item 3</span>
</li>
<li>
<div id="remove-drag" style="width: 100%; height: 80px; background-color: #FF8B8B;">
<div style="color: #fff; font-size: 20px; text-align: center; padding-top: 20px;">Remove
<div class="tip">Drop here</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>