Tag: droppable

如何在第一个实例完成后在jquery中复制可拖动/可放置的实例: 我正在构建一个小的jquery draggable / droppable应用程序。你可以在这里看到它： http://jsfiddle.net/franco13/AwnJA/1/ 我需要做以下操作，我是新手，在jquery中拖放，所以谢谢你的协助。我希望：防止蓝框被拖动到方框2，直到它被丢弃在方框1中一旦蓝色方框放入方框1，我想让它再次拖拽，这样它就可以放入方框2，同时留下一个克隆像这样： $( init ); function init() { $(‘.teamEmblem’).draggable({ // containment: $(‘.teamEmblem’).parent(), // this does not work cursor: ‘move’, helper: ‘clone’, obstacle: “.teamEmblem”, // this does not work preventCollision: true, // this does not work revert: true }); $(‘.winner’).droppable({ hoverClass: ‘hovered’, tolerance: ‘touch’, drop: handleCardDrop2 }); […]

jQuery UI：droppable背景？: 我正在尝试创建一个垃圾桶，在你把一些物品放在那里之后，你可以简单地打开它并将任何被丢弃的物品从垃圾箱中拖出来拖出它。我设置这个的方式是，我的网络应用程序有一个垃圾桶图标，我放下项目，然后单击垃圾桶打开一个包含已删除项目的框，并在黑色透明背景中淡入淡出其他所有内容，这样您就可以专注于垃圾桶框。代码本质上是 item1 item2 背景CSS设置为固定位置和100％宽度和高度，并设置为droppable。问题是，当我从垃圾桶中拖出一些东西并将其放在背景上时，即使我将它放在垃圾桶的顶部，它也会被移除。基本上jQuery不知道trashcanContainer div是在背景div的顶部（因此不是droppable的一部分），即使我定义的z-index高于背景。我有什么方法可以做这个工作吗？

行数据消失在Datatables上？: 所以让我先解释一下我想要效仿的内容。在主页上，有一个包含最近表条目的主表。为用户提供了一组“collections”文件夹，他们可以从主表中拖放表行。而不是拖动整个可见行（我的行相当宽，并且很难分辨它将放入哪个文件夹）我有“信息”图标，在这种情况下是向上箭头。用户可以拖动图标并将其拖放到文件夹中，此时应将其从主表中删除并附加到该collections夹文件夹中的表中。到目前为止，大部分内容都发生在下面的小提琴中（除了没有从主表中删除行）。使用Datatables时问题开始变得明显。将行添加到collections夹文件夹后，它显然在那里，直到您在分页时单击下一个和上一个。它消失了。此外，它似乎永远不会真正成为表的一部分，因为Datatables左下角的信息没有更新。显示3个条目中的1到2个，当总共可能有4个（从用户拖动的行中）。我理解向Datatables添加行，你需要fnAddData，但我不知道如何在这个实例中使用它，任何想法？预先感谢。小提琴： http ： //jsfiddle.net/YK5fg/4/ $( “.drag” ).draggable({ revert: “invalid” }); $( “.dropTarget” ).droppable({ drop: function( event, ui ) { // fade out dropped icon ui.draggable.hide(); var dropped = parseInt($(this).attr(‘title’)) + 1; $( this ) .attr(‘title’,dropped+’ entries’); var delay = $(this); delay.prop(‘disabled’, true).addClass(‘ui-state-highlight’) […]

如果缩放，Jquery可放置区域错误: 这是评论的小提琴： http ： //jsfiddle.net/7xw1m1qd/1/ 以Html为例： JS例如： $(‘.drag’).draggable({}); $(‘.droppable’).droppable({ out: function() { $(‘.drag’).css(‘background-color’, ‘red’); }, drop: function() { $(‘.drag’).css(‘background-color’, ‘green’); }, }); CSS例如： .droppable { width: 200px; height: 200px; transform: scale(2); -webkit-transform: scale(2); -ms-transform: scale(2); background-color: #C3C3C3; } .drag { background-color: black; width: 20px; height: 20px; z-index: 10; position: absolute; top: 10px; left: 350px; } 问题是：如果droppable被缩放（通过transform：scale），它仍然使用droppable的原始尺寸，所以我只能在droppable的原始边界中删除元素。 […]

replaceWith和jQuery draggable drop？: 我想知道为什么 $(‘#title’).replaceWith(‘ha’); 将在外面工作 drop: function(event, ui) {} jquery的droppable脚本中的区域，但它不能在里面工作。具体来说，如果我这样做 $(“.droppable”).droppable({ drop: function(event, ui) { $(‘#title’).replaceWith(‘ha’); } 我得到一个Runtime Error (line 1102) data(…).options is null or not an object 。如果我插入$(‘#title’).append(‘ha’); 在drop：里面，它有效。但是如果我把$(‘#title’).replaceWith(‘ha’); 外面的任何地方 $(“.droppable”).droppable({ /* */ }); 有用？

可放置的droppable: 我有这个标记我做了这件事 $(“ul.cat”).droppable( { drop:function() { alert($(this).attr(“id”)); } }); 它总是写“你好”。只有“你好”。我怎样才能在孩子身上绑定droppable？ UPD：我想在＃hello的chidlren和#hello本身中删除元素。我想确定李被丢弃的地方。

如何使用jquery或ajax将图像（仅限图像URL）拖动到可放置区域以上传到服务器？: 我想通过图片url将图片上传到服务器。此图像被拖放到可放置区域。（或者有没有办法将图像URL发布到javascript函数中的另一个页面？）如何在可放置区域中使用此图像以使用jquery或ajax上载到服务器。就像我放弃图像一样，它会通过图像url自动上传到服务器（例如http://dfghg.com/sss.jpg ）。图像（例如http://dfghg.com/sss.jpg ）与拖放区域位于同一页面内。 inheritance我的代码 $(“#query_image_container”).droppable({ accept: “.thumb”, activeClass: “ui-state-highlight”, drop: function( event, ui ) { $(this).find(“.thumb”).remove(); $(this).append(”); var imageurl = ui.draggable.attr(‘src’); $.ajax({ type: ‘POST’, url: ‘uploadurl.php’, data: imageurl, success:function() { } datatype: ‘html’ }); } }); 我可以使用$ .ajax（{…}）; 在一个可放置的？或者有没有其他方法我可以使用“data：imageurl”对uploadurl.php进行POST？我们的想法是将图像（同一网页上的图像）拖动到放置区域，它将自动上传到服务器。

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作战？我真的想在浏览器中尽快做到这一点。

在嵌套的dataTable中拖放: 我正在使用primeface 4.0。 primeface 展示仅显示如何将draggable到droppable 。但是，从来没有提到过如何拖拽那个draggable拖车。我想创建一个dataTable：每个td都有一个droppable放置的面板，可以将多个draggable面板拉入和拉出。这个dataTable的“保存数据”的后bean对象，我假设如果dataTable是2 * 2，则后端bean中将有4个List，每个都存储相应droppable区域的draggable对象列表。有点像p:schedule的简单版本，允许事件在单元格之间拖放。我的努力：我设法使一些function工作，就像拖入一个droppable 但我不能删除拖动的draggable因为p:draggable没有ajax事件drag将数据传递给后端bean，因为我在p:droppable drop事件。（有一种方法可以使用JQuery draggable event start和stop将col和row num传递给后面的bean，但我不确定这是一个好方法去）我不认为我的实现是正确的方法，因为有一些奇怪的错误，有时我从ddEvent.getData()获得的拖动对象不正确。（我猜它与p:droppable的唯一dataSource有关。问题1469 ）更新：我认为主要问题是p:droppable只绑定一个数据源，所以ddEvent.getData()总是从绑定数据源获取’对象’，我的问题是我有多个可放置区域，每个都需要绑定多个数据源。。太糟糕了我无法发布截图… 这是我的代码：xthml：Shifts … 回豆： public List getDailyShift(String eid, Date date) { return this.tmpSchedule.getShifts(eid).get(date); } public void onShiftDrop(DragDropEvent ddEvent) { ShiftDto shift = ((ShiftDto) ddEvent.getData()); Date weekday […]