我想实现一个简单的拖放和拖动,如果有其他方法实现它,不需要鼠标放下,鼠标移动和鼠标事件。原因是因为在我拖放鼠标事件之前,我的鼠标向上事件触发了页面上的附加事件。我不知道如何让它适应火灾,所以我正在寻找替代方法。实现拖放
Q
实现拖放
0
A
回答
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的手机兼容:touchpunch.furf.com
我做了一个的jsfiddle,显示你如何使用jQuery UI的可弃和可拖动的例子:
// 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);
相关问题
- 1. Android拖放实现
- 2. 实现窗口拖放WPF
- 3. 如何实现拖放gui?
- 4. 实现拖放在姜饼
- 5. 实现拖放类似
- 6. 在wp8.1中实现拖放
- 7. 在CakePHP中使用AJAX实现拖放
- 8. 如何实现拖放功能extjs 4.0.2a
- 9. 如何在android中实现拖放?
- 10. 如何在android 2.2中实现拖放?
- 11. 如何实现拖放操作
- 12. 实现拖放在UITable视图
- 13. 在NSTableView中实现拖放操作
- 14. 在Java中实现拖放接口
- 15. 如何实现拖放图像?
- 16. 如何实现拖放在GWT
- 17. dojox.mobile.ListItem使用dojo拖放实现
- 18. 使用UILongPressGestureRecognizer实现拖放UIImageView
- 19. 如何在Angular2中实现拖放?
- 20. 无法使用Osmdroid实现onTouchEvent(拖放)
- 21. 如何实现Ionic的拖放指令?
- 22. 如何实现拖放到画布上?
- 23. 如何使用角度拖动实现拖放
- 24. 离子如何实现按下按钮,释放,拖放事件?
- 25. 在现有的datagrid行上实现拖放选项?
- 26. 实施textarea的拖放
- 27. 实时拖放在Swing中
- 28. Raphael Scope拖放n拖放多个纸张实例
- 29. 实现 - 拖-n-drop-using-jquery
- 30. 实现MKPinAnnotationView拖动功能?
你可以有一个布尔'isDragging',在mouseMove事件中将其设置为'true',并在mouseUp事件中检查其状态以确定适当的行为? – kevinsa5
如果您使用jQuery附加事件,则应按照它们附加的顺序触发。我们可以看到你的代码吗? – 2013-07-20 16:57:34
第一只鼠标上挂在我的面前。当用户在div上单击(鼠标按下)时,我的魔方才会被连接。另外,我在鼠标上设置的鼠标移动不会被'$(element).off(“mousemove”)'移除。 –