Tag: 拖放

如何使用dolly.js已经为excel的function定义了html表，如拖动和复制表格的单元格: 看到这个js小提琴[http://jsfiddle.net/pUAXd/17/]我在html体中创建我的表，想要在我的桌子上使用dooly.js的拖放function，就像第二个表一样。

jQuery拖放而不破坏拖动的项目: 我对以下内容有些困难，需要一些指导才能实现（简单）。使用jQuery，如何将一个对象拖入容器，为事件注册它，并保留原始拖动的项目。这很难解释，所以我能给出的最好的是一个有工作示例的网站：在这里输入链接描述我熟悉使用draggable，droppable和注册原始容器，但是在drop上，拖动的对象从它的原点移动。基本上，我希望实现这一目标>> 有一个无序的图像列表，这些图像都使用draggable注册。有一个注册为droppable的容器。在其中一个图像拖放到容器上，检测碰撞，然后删除+渲染一些html（为了演示目的，您可以显示如何对任何图像执行此操作，并且删除的结果可能是页面上的链接。在此过程中，不得从无序列表中移动图像。使用事件注册目标html（为了演示目的，我们可以捕获新插入的html的onclick事件）。拖放位是容易的部分。我遇到的困难分为三部分：掉落后将原始物品保留在原始位置。不要删除原始项目的克隆 – 而是使用自定义html。设置已删除的代码以处理该代码块特有的新事件。提前致谢。

Jquery拖放不在Firefox中工作，在chrome和safari中工作正常: Jquery拖放不在Firefox和IE中工作，但在chrome和safari中工作正常。这是我的代码： $(“.drag”).draggable({ helper: “clone”, }); $(“.drop”).droppable({ drop: function (ev, ui) { if ($(ev.toElement).hasClass(“drop”) == true) { var widgetId = $(ui.draggable).attr(“id”); $(ev.toElement).attr(“id”, “dash_” + widgetId); $(ev.toElement).html($(ui.draggable).html()); } } }); 代码已上传至http://www.skmcap63.hostoi.com/box-dashboard/ 我需要从侧边栏拖动项目并将其放入框中。请帮忙。提前致谢。

优化jQuery UI拖放计划网格: 我有一个基于HTML表的计划网格，使用jQuery / jQuery UI拖放。表中的每个单元代表一个用户和时间段。我在IE9，FireFox和Chrome中表现不错，但IE8无法使用，因为用户开始拖动和拖动助手出现之间会有几秒钟的暂停。我知道问题的一部分是我正在创建大量的droppables，在这种情况下： 112个24小时网格的用户（共创建了2688个可放置的网站）如果我删除使空2688单元格可丢的代码，速度会显着增加，但动画在IE8中仍然感觉迟钝。有什么建议可以加快这个速度？我已经考虑过让表本身成为droppable，但我不知道如何计算掉哪个单元格，我会失去指示活动单元格的hoverState CSS背景。一个关键要求是我坚持使用HTML表，因为它是如何在服务器上绑定数据的。我是否正在与IE8作战？我真的想在浏览器中尽快做到这一点。

如果div已被删除，请禁用drop？: 我已经创建了一个拖放游戏，以便开始自学jquery。一切似乎都在起作用，但你可以将多个项目放在同一个方格上。如果占位符中有图像，我想禁用droppable。我调查过： `greedy: true` 这会禁用掉线，但我不知道如何再次启用它，还有： $(this).droppable( ‘disable’ ); 如果块/图像恢复到原始位置或移动到另一个方块，我可以得到这两个来禁用掉落但不确定如何让它们再次启用它。完整版： http ： //creativelabel.co.uk/drag-and-drop/ 更新：这是可放置插槽的代码。 for ( var i=0; i<=19; i++ ) { var images = 'images/slot' + slotNumbers[i] + '.jpg'; $('’).attr(‘id’, ‘slot’+slotNumbers[i]).data( ‘slotNumbers’, slotNumbers[i] ).appendTo( ‘#imgSlots’ ).droppable( { accept: ‘#images img’, hoverClass: ‘hovered’, drop: handleDropEvent, activate: handleDragEvent }); 这是drop:事件代码： function handleDropEvent( event, ui […]

Jquery在htmlcanvas上拖放: 您好我正在尝试将div（div项目）中的itms拖到htmlcanvas上。我有帮助克隆的问题。当我简单地拖动没有帮助器的项目时，它将itms拖放到canvas上，但是当我使用帮助器克隆时，它不会将项目拖放到canvas上。我附上了小提琴，请检查一下。 HTML Drag me down1 Drag me down2 Drag me down3 JS $(“#drag li”).draggable({ helper: ‘clone’ }); JS FIDDLE 提前致谢。

丢弃区域的JQuery拖放计数内容？: 我正在开发一个Jquery项目，用户可以在其中将“药丸”拖入“杯子”，然后可以显示杯子中的药丸数量，但是如果用户移动，一旦药丸进入杯子就会出现问题药丸它被认为是再次被丢弃。如何将可拖动（药丸）放入可放置（杯子）中时计算一次。这是一个存储arrays或将标识符附加到每个药丸的for / if循环的情况吗？这是我的一些代码html accept: ‘#Pill’ JQuery是： $(document).ready(function() { var count = 0; $( “.Pill”).draggable(); $( “.PillCup” ).droppable({ accept: “.Pill”, activeClass: “ui-state-hover”, hoverClass: “ui-state-active”, over:function(){ $( “.PillCup” ).find(“p”).html(count).text; }, out:function(){ count–; $( “.PillCup” ).find(“p”).html(count).text; }, drop: function( event, ui ) { count++; $( “.PillCup” ).find(“p”).html(count).text; } }); }); 希望有人能提供帮助多谢你们

使用jQuery UI拖放帧: 我想这样做：从包含IFRAME的第一个文档中拖动DIV元素将此DIV元素放入IFRAME内的第二个文档中。有没有办法使用jQuery UI draggable＆droppable来实现这一目标？或者以跨浏览器的方式执行此操作，可能还有另一个JS库？

在缩放容器时拖动n Drop无法正常工作: 当我将容器缩放到0.5时，DND表现不正常。请任何人帮我解决问题。 HTML： drag1 drag2 drop1 drop2 JS： $(“.draggable”).draggable({ revert: ‘invalid’ }) $(“.droppable”).droppable() 我创建了问题的小提琴链接： https ： //jsfiddle.net/7eqnhsp3/

jquery ui当我点击droppable项目时如何获取可拖动项目的id: 我已经试了好几天了，我无法让它发挥作用。我想得到div（ ui-widget-content ）的id是可拖动的项目，当我删除并单击div（ ui-widget-header ）时，这是被删除的项目，但我无法使其工作。 $(document).ready(function () { $(“#j1, #j2, #j3, #j4, #j5, #j6”).draggable(); $(“#p1, #p2, #p3, #p4, #p5, #p6”).droppable({ hoverClass: ‘ui-state-hover’, helper: ‘clone’, cursor: ‘move’, drop: function (event, ui) { $(this).addClass(‘ui-state-highlight’); $(ui.draggable).addClass(‘ui-state-highlight’); $(ui.draggable).draggable(‘enable’); console.log(‘Dragged: ‘ + alert(ui.draggable.attr(“id”))); } }); }); $(‘ui-widget-header’).click(function () { var item_id = ui.item.attr(‘id’); }); alert(‘item_id’); //$(‘.ui-droppable’).click(function(){ // var myStringPosition […]