Sử dụng jQuery plugin hỗ trợ kéo thả (drag & drop)

GIỚI THIỆU

jquery-dragndrop là một thư viện dành cho việc hỗ trợ kéo thả, rất hữu dụng trong trường hợp bạn cần kéo thả nhiều items cùng một lúc:

Giữ phím Ctrl (hoặc phím ⌘ cho máy Mac) để chọn nhiều items cùng một lúc.
Giữ phím Shift để chọn nhiều items gần nhau
Bạn có thể kết hợp cả phím Shift và Ctrl/⌘ .
Hỗ trợ các sự kiện callback events: ondrag, ondrop, ondragover, ondragout, ondropover, ondropout

jquery drag and drop with multiple support

HƯỚNG DẪN SỬ DỤNG

Trong ví dụ này, chúng ta sẽ có 2 ô (A và B) chứa hình ảnh có thể kéo thả được, bạn có thể chọn một hoặc nhiều hình ảnh một lúc và thực hiện việc kéo thả từ ô bên trái sang ô bên phải hoặc ngược lại

1. Thêm file CSS & JS

<link rel='stylesheet' href='https://cdn.rawgit.com/Mr21/jquery-dragndrop/master/css/jquery-dragndrop.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/Mr21/jquery-dragndrop/master/js/jquery-dragndrop.js'></script>

2. HTML

Hai panel A và B sẽ được gán lớp "jqdnd-drop" và mỗi item được gán lớp "jqdnd-drag" để có thể thực hiện việc kéo thả

<div id="dragndrop">
	<div class="jqdnd-drop A">
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/a_bug_s_life.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/brave.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/cars.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/the_incredibles.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/monsters_inc.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/finding_nemo.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/planes.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/ratatouille.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/toy_story.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/up.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/wall-e.jpg)"></b>
	</div>
	<div class="jqdnd-drop B">
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/antz.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/chicken_run.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/how_to_train_your_dragon.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/kung_fu_panda.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/madagascar.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/puss_in_boots.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/rise_of_the_guardians.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/shrek.jpg)"></b>
		<b class="jqdnd-drag" style="background-image:url(http://mr21.fr/jquery-dragndrop/img/turbo.jpg)"></b>
	</div>
</div>

3. Để sắp xếp các panel và item ban đầu, mình sử dụng CSS như sau (copy và đơn giản hoá từ tác giả)

#dragndrop:after { content: ""; display: block; clear: both; }
#dragndrop {
	position: relative;
	width: 100%;
	margin: auto;
	padding-bottom: 10px;
	border-radius: 4px;
	background: rgba(0,0,0,0.1);
}

.jqdnd-drop {
	float: left;
	width: 275px; /* 4*64=256 + 19 */
	height: 180px; /* 5 * 36 */
	margin: 10px 0 0 10px;
	border-radius: 2px;
	overflow-y: scroll;
	font: normal 1px courier;
	background: rgba(255,255,255,0.8);
}

.jqdnd-drop.hover {
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	background: #fff;
}

.jqdnd-drag,
.jqdnd-dragHole {
	height: 36px;
}

.jqdnd-drag {
	width: 64px;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
}

4. Gọi hàm javascript

Như các bạn đã thấy, khi gọi hàm, chúng ta đã bắt các sự kiện do jquery-dragndrop tạo ra để xử lý (ondrag, ondrop v.v...), bạn nên tuỳ biến các hàm này để phù hợp với ứng dụng của mình. Trong sự kiện ondragover và ondragout, chúng ta sử dụng animate() để tạo ra hiệu ứng đẹp hơn khi người dùng kéo và thả.

$(function() {
    var DURATION = 150;
    var CSS_CLOSE = {
        backgroundPosition: '0px'
    };
    
    $('#dragndrop').dragndrop({
        duration: DURATION,
        ondrag: function(drops, drags) {
            console.log('>>> ondrag');
        },
        ondrop: function(drop, drags) {
            console.log('<<< ondrop');
        },
        ondragover: function(l, r) {
            console.log('>>> ondragover');
            var $l = $(l),
                $r = $(r);
            $l.stop().animate({
                backgroundPosition: $l.width() * -0.1 + 'px'
            }, DURATION, 'swing');
            $r.stop().animate({
                backgroundPosition: $r.width() * 0.5 + 'px'
            }, DURATION, 'swing');
        },
        ondragout: function(l, r) {
            console.log('<<< ondragout');
            $(l).stop().animate(CSS_CLOSE, DURATION, 'swing');
            $(r).stop().animate(CSS_CLOSE, DURATION, 'swing');
        },
        ondropover: function(drop) {
            console.log('>>> ondropover');
            $(drop).addClass('hover');
        },
        ondropout: function(drop) {
            console.log('<<< ondropout');
            $(drop).removeClass('hover');
        }
    });
})

DEMO

See the Pen Jquery Drag and Drop by Thanh Nguyen (@genievn) on CodePen.

Recent Post