Cố gắng chuyển đối tượng jQuery đến thuộc tính dataTransfer
trong một chuỗi kéo/thả. Sau khi thêm thuộc tính vào jQuert.event.props
mảng tôi có thể gán nó, nhưng nó trả về không xác định trong sự kiện drop
. Không chắc chắn những gì tôi đang thiếu ở đây - có vẻ thực sự đơn giản.Phần tử vượt qua jQuery tới thuộc tính dataTransfer
Javascript:
function dragClip(clip, event){
event.dataTransfer.el = clip;
/* Console confirms event.dataTransfer.el is the jQuery object */
}
function dropClip(target, event){
target.append(event.dataTransfer.el);
/* event.dataTransfer.el no longer has the object... where'd it go?? */
}
jQuery.event.props.push('dataTransfer');
$('#titles')
.bind('dragenter dragover', false)
.bind('drop', function(event){
dropClip($(this), event);
});
$('.clip').bind('dragstart', function(event){
dragClip($(this), event);
});
UPDATE:
Viết lại để loại bỏ tính cách rườm rà. Có những thứ khác bao gồm trong đó, nhưng một chức năng ẩn danh sẽ làm tốt:
jQuery.event.props.push('dataTransfer');
$('#titles')
.bind('dragenter dragover', false)
.bind('drop', function(event){
$(this).append(event.dataTransfer.el);
});
$('.clip').bind('dragstart', function(event){
event.dataTransfer.el = $(this);
});
CẬP NHẬT
Theo @ trả lời cuối cùng Barney, mã làm việc cuối cùng của tôi. Tôi nhận thấy rằng việc sử dụng sự kiện ban đầu không cho phép tôi chuyển đối tượng dưới dạng dữ liệu, vì vậy thay vào đó, tôi áp dụng ID và xây dựng lại đối tượng jQuery khi thả. Cũng thắt chặt mọi thứ bằng cách loại bỏ các hàm được khai báo. Ít mã hơn, cùng một kết quả.
$('#titles')
.bind('dragenter dragover', false)
.bind('drop', function(event){
$(this).append($('#' + event.originalEvent.dataTransfer.getData('clip')));
});
$('.clip')
.bind('dragstart', function(event){
event.originalEvent.dataTransfer.setData('clip', $(this).attr('id'));
});
+1 cho phần "CẬP NHẬT" này. Điều này đã giúp tôi. –