Javascript 实现拖放
我正在尝试实现一个简单的拖放，我想知道是否有其他实现方法不需要鼠标按下、鼠标移动和鼠标向上事件。原因是因为我的鼠标向上事件在我的拖放鼠标向上事件之前触发了页面上的附加事件。我不知道如何让它适当地启动，所以我正在寻找替代方法。您可以尝试使用jquery UI并实现您想要的，两者的结合让您可以做很多事情，而且很容易，因为文档中有一些示例要开始，您可以找到很多类似这样的示例： 要使其在兼容移动设备（触摸事件）的情况下工作，请使用此脚本。使jquery ui与移动设备兼容：touchpunch.furf.com 我制作了一个JSFIDLE，展示了如何使用jquery ui可拖放的示例：Javascript 实现拖放,javascript,jquery,Javascript,Jquery,我正在尝试实现一个简单的拖放，我想知道是否有其他实现方法不需要鼠标按下、鼠标移动和鼠标向上事件。原因是因为我的鼠标向上事件在我的拖放鼠标向上事件之前触发了页面上的附加事件。我不知道如何让它适当地启动，所以我正在寻找替代方法。您可以尝试使用jquery UI并实现您想要的，两者的结合让您可以做很多事情，而且很容易，因为文档中有一些示例要开始，您可以找到很多类似这样的示例： 要使其在兼容移动设备（触摸事件）的情况下工作，请使用此脚本。使jquery ui与移动设备兼容：touchpunch.furf
//jquery闭包
（函数（$，窗口，未定义）{
//关于dom ready
$（函数（）{
初始化dRopZone（）；
初始化标记（）；
});
/**
*
*初始化dropzone元素
*
*/
var initializeDropzone=函数（）{
//初始化dropzone以使dropzone成为可拖放元素
// http://jqueryui.com/droppable/
$（“#dropzone”）。可拖放({
accept:'.foo'，//只有具有此类的元素才会被dropzone接受
hoverClass:'drop_hover'，//css类，如果鼠标悬停在元素上，则应将其应用于dropzone
贪婪：没错，
drop：函数onDrop（事件，用户界面）{
console.log（“#dropzone drop”）；
var droppedElement=ui.draggable；
console.log（droppedElement）；
//创建一个对象并用我们从被删除的元素中提取的数据填充它
var droppedElementData={}；
droppedElementData.id=parseInt（droppedElement.attr（'data-foo-id'）；
droppedElementData.name=droppedElement.text（）；
var-dropLogElement=$（'#dropLog'）。查找（'ul'）；
DropPederElementData.position=dropLogElement.children（）.length+1；
//创建列表html，将关于已删除元素的行添加到日志中
var rowHtml=''；
rowHtml+=''；
rowHtml+=''+droppedElementData.position+'）；
rowHtml+=''+droppedElementData.name+''；
行HTML+=' '；
变量行=$（行HTML）；
//将新行追加到日志中
dropogelement.append（行）；
}
});
};
/**
*
*初始化可拖动元素
*
*/
var initializeDraggables=函数（）{
// http://jqueryui.com/draggable/
//使所有具有“foo”类的元素都可拖动
$（“#可拖放”）.find（“.foo”）.draggable({
refreshPositions:true，//鼠标移动时刷新位置，如果性能不好则禁用
还原：函数（事件）{
log（'dropzone上掉了一个“foo”）；
//若元素被放置在dropzone上，则事件将包含
//一个对象，否则它将是假的
如果（事件）{
//事件存在，这意味着Dragable元素被丢弃在dropzone内
log（'YEP the event is not false'）；
//正在删除的元素
var draggedElement=$（此）；
//向拖动的图元添加爆炸效果
德拉格德雷效应(
“爆炸”，
1000,
函数（）{
console.log（“下降比例效果完成”）；
控制台日志（draggedElement）；
//将图元放回其原始位置
css（'left'，'0'）；
css（'top'，'0'）；
//通过淡入使图元再次可见
show（'fade'，{}，1000）；
}
);
返回false；
}否则{
//false，因为draggable元素被丢弃在dropzone之外
log（'NOPE no object，事件为false'）；
返回true；
}
},
开始：功能（事件、用户界面）{
//用户开始拖动一个元素
log（'#droppables.foo drag start'）；
},
停止：功能（事件、用户界面）{
//用户已释放可拖动元素
console.log（'#droppables.foo drag stop'）；
}
});
//使所有具有类“bar”的元素都可拖动（但dropzone不接受它们）
$（“#不可拖动”）。查找（“.bar”）。可拖动(
{
revert:true，//如果元素未在dropzone中删除或未被其接受，则将其位置还原回其原始坐标
开始：功能（事件、用户界面）{
//用户开始拖动一个元素
console.log（“#nondropables.bar拖动开始”）；
},
停止：功能（事件、用户界面）{
//用户已释放可拖动元素
console.log（“#不可拖动的.bar拖动停止”）；
}
}
);
};
})（jQuery，窗口）；
// 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);