我有一堆jQuery元素.有些是可拖动的,有些是可以放置的,有些是可以拖放的.如何检测元素是否可拖动或可拖放？
我的屏幕分为两个DIV.在左边DIV我有几个50x50像素DIVs,在右边DIV我有一个80x80 LI秒的空网格.DIV左边的s是可拖动的,一旦落在a上LI,它们应该对齐到中心LI.
听起来很简单吧？我只是不知道如何完成这件事.我尝试通过操纵已删除DIV的top和leftCSS属性来匹配LI它们被放入的属性,但是left和top属性是相对于左边的DIV.
我怎样才能最好地将掉落的元素捕捉到它所放入的元素的中心？这一定很简单吧？
编辑:我正在使用jQuery UI 1.7.2和jQuery 1.3.2.
编辑2:对于其他有这个问题的人,这是我修复它的方法:
我使用Keith的解决方案来删除拖动的元素并将其放置drop在droppable插件的回调中的drop-on元素中:
function gallerySnap(droppedOn, droppedElement)
{
$(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' );
$(droppedElement).remove();
}
我不会将被删除的元素再次拖动,但如果你这样做,只需将draggable再绑定到它.
对我来说,这个方法也解决了我在定位掉落的元素(相对于左边DIV)和在第二个内部滚动时遇到的问题DIV.(元素将保持固定在页面上,现在它们滚动).
我确实玩了快照选项,使其在拖动时看起来很好,所以感谢karim79的建议.
我可能不会用这个赢得任何Awesome Code奖品,所以如果你看到改进的空间,请分享!
任何人都可以告诉我如何在接受条件下编写函数,然后如何找出接受什么和不接受什么.例如,我想接受div a并div b接受条件.如何通过函数编写I？
我有一个jQuery UI droppable,它接受draggables.如果满足某些条件,我想不允许掉落动作.
如何取消放下操作并执行类似操作的恢复操作？
我有一个带有drop事件处理程序的droppable:
$(this).droppable({
drop:function(){
console.log('OMG You Dropped It!');
}
});
我有一个拖车:
$(this).draggable();
我想要做的是触发droppable上的drop事件处理程序而不实际拖放draggable.我想在不实际执行行为的情况下模拟实际行为.
我认为这样的事情会做:
$(droppable).trigger('drop', [draggable]);
不幸的是,它并不那么简单.有谁知道我怎么能做到这一点？
如果ajax调用on drop返回失败,我希望draggable恢复到其原始位置.这是我想象的代码..如果在ajax调用正在进行中,draggable可以放在droppable中,这是可以的...
<script type="text/javascript">
jQuery(document).ready($){
$("#dragMe").draggable();
$("#dropHere").droppable({
drop: function(){
// make ajax call here. check if it returns success.
// make draggable to return to its old position on failure.
}
});
}
</script>
<div id="dragMe">DragMe</div>
<div id="dropHere">DropHere</div>
这可能很容易做到,但我总觉得太复杂了.
我刚用#draggable /#droppable建立了一个简单的测试,其宽度/高度固定+ float:left.
然后,我想要一个重置按钮,以便在#draggable被捕捉到#droppable后将其重置为原始状态.(底线)
$(document).ready(function() {
$("#draggable").draggable
({
revert: 'invalid',
snap: '#droppable',
snapMode: 'corner',
snapTolerance: '22'
});
});
$("#droppable").droppable
({
accept: '#draggable',
drop: function(event, ui)
{
$(this).find("#draggable").html();
}
});
$(".reset").click(function() {
/* What do I put here to reset the #draggable to it's original position before the snap */
});
我有一个可排序的列表,connectWith用于确保它只能在自己的列表类型中排序.
现在,我正在尝试在对项目进行排序时,在视口底部显示可放置的垃圾桶元素.此元素位于列表的上下文之外,只删除放在其上的任何元素.如果您熟悉,则所需功能与从Android手机桌面删除快捷方式相同.
问题是,虽然我的垃圾桶是一个接受'*' connectWith的dropable ,但我的sortable仅被告知其他'.dropZone'项目,这意味着我无法获得任何可排序的元素来导致垃圾元素上的悬停状态.
我已经尝试将每个可排序的东西变成一个可拖动的start事件,但当然我并没有在正确的时刻拖动那个可拖动的,所以它没有被激活.是否有可能满足这两个要求,或者我是否必须检测垃圾桶是否可以手动悬停？
我已经设置了FullCalendar来接受drop,它确实如此.但是我用revert构建的可拖动对象:'invalid'似乎并不认可FullCalendar上的日期为droppable,而是还原.这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>mydrag</title>
<script src="fullcalendar-bundle.js" type="text/javascript"></script>
</head><body>
<div id="mydrag" style="width: 200px; height: 100px; background-color: red;">My Drag</div>
<div id="calendar"></div>
<script type="text/javascript">
function onExternalEventDrop(date, allDay) {
alert("Dropped on " + date + " with allDay=" + allDay);
}
$('#mydrag').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: 'MyDrag Title'
};
// store the Event Object in the …情况:
大家好!在我的应用程序中,我有一种看板:有一些列,每列都包含一个项目列表.
我需要在列之间拖放项目并在同一列内重新排序.
我之前尝试过三个与拖放相关的角度模块(前两个)和重新排序(第三个):
ngDraggable:https://github.com/fatlinesofcode/ngDraggable
Angular dragdrop:https://github.com/codef0rmer/angular-dragdrop
Angular ui-sortable:https://github.com/angular-ui/ui-sortable
它们很好,文档很好,但似乎不可能同时拖放和重新排序.然后我找到另一个模块:
ng-sortable:https://github.com/a5hik/ng-sortable
这似乎正是我所需要的.但文档并不那么清楚.我无法理解如何设置它.
题:
你能告诉我怎么设置它吗？有一个有良好而清晰的例子的掠夺者？
谢谢!
droppable ×10
jquery ×7
draggable ×6
jquery-ui ×6
javascript ×3
angularjs ×1
fullcalendar ×1
jquery-data ×1