我正在尝试实现一个简单的拖放操作，并且如果有其他实现它的方法不需要鼠标按下，鼠标移动和鼠标移动事件就会徘徊。原因是因为我的鼠标按下事件在我拖放鼠标按钮事件之前触发了页面上的附加事件。我不知道如何让它合适，所以我正在寻找替代方法。
答案 0 :(得分：3)
你可以尝试使用jquery UI http://jqueryui.com/draggable/和http://jqueryui.com/droppable/来实现你想要的东西，两者的结合可以让你做很多事情并且很容易，因为文档中有一些例子可以开始，你可以找到很多像这样的例子：http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
使其适用于移动设备（触摸事件）兼容使用此脚本。使jquery ui mobile兼容：touchpunch.furf.com
我创建了一个jsfiddle，显示了如何使用jquery ui droppable和draggable的示例：
// jquery closure
(function($, window, undefined) {
// on dom ready
$(function() {
initializeDropzone();
initializeDraggables();
});
/**
*
* intializing the dropzone element
*
*/
var initializeDropzone = function() {
// initialize the dropzone to make the dropzone a droppable element
// http://jqueryui.com/droppable/
$('#dropzone').droppable({
accept: '.foo', // only elements with this class will get accepted by the dropzone
hoverClass: 'drop_hover', // css class that should get applied to the dropzone if mouse hovers over element
greedy: true,
drop: function onDrop(event, ui) {
console.log('#dropzone drop');
var droppedElement = ui.draggable;
console.log(droppedElement);
// create an object and fill it with data we extract from element that got dropped
var droppedElementData = {};
droppedElementData.id = parseInt(droppedElement.attr('data-foo-id'));
droppedElementData.name = droppedElement.text();
var dropLogElement = $('#dropLog').find('ul');
droppedElementData.position = dropLogElement.children().length + 1;
// create the list html to add a row about the dropped element to our log
var rowHtml = '';
rowHtml += '<li id="' + droppedElementData.position + '_' + droppedElementData.id + '">';
rowHtml += '<span class="position">' + droppedElementData.position + ') </span>';
rowHtml += '<span class="name">' + droppedElementData.name + '</span>';
rowHtml += '</li>';
var row = $(rowHtml);
// append the new row to the log
dropLogElement.append(row);
}
});
};
/**
*
* intializing draggable elements
*
*/
var initializeDraggables = function() {
// http://jqueryui.com/draggable/
// make all elements that have the class "foo" draggable
$('#droppables').find('.foo').draggable({
refreshPositions: true, // refresh position on mouse move, disable if performance is bad
revert: function(event) {
console.log('a "foo" got dropped on dropzone');
// if element is dropped on a dropzone then event will contain
// an object, else it will be false
if (event) {
// the event exists, this means the draggable element got dropped inside of the dropzone
console.log('YEP the event is not false');
// the element that is being dropped
var draggedElement = $(this);
// add explosion effect to dragged element
draggedElement.effect(
'explode',
1000,
function() {
console.log('drop scale effect finished');
console.log(draggedElement);
// put the element back to its original position
draggedElement.css('left', '0');
draggedElement.css('top', '0');
// make the element visible again by fading it in
draggedElement.show('fade', {}, 1000);
}
);
return false;
} else {
// false because draggable element got dropped outside of the dropzone
console.log('NOPE no object, the event is false');
return true;
}
},
start: function(event, ui) {
// the user started dragging an element
console.log('#droppables .foo drag start');
},
stop: function(event, ui) {
// the user has released the draggable element
console.log('#droppables .foo drag stop');
}
});
// make all elements that have the class "bar" draggable (but the dropzone wont accept them)
$('#nonDroppables').find('.bar').draggable(
{
revert: true, // if the element did not get dropped in the dropzone or not accepted by it, then revert its position back to its original coordinates
start: function(event, ui) {
// the user started dragging an element
console.log('#nonDroppables .bar drag start');
},
stop: function(event, ui) {
// the user has released the draggable element
console.log('#nonDroppables .bar drag stop');
}
}
);
};
})(jQuery, window);