Tag: draggable

如何在第一个实例完成后在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 Draggable – 如果参数传递给clone（），则返回clone（）的Helper函数仅克隆一次: 我正在克隆元素，因为它们是使用JQuery的clone()方法从JQuery UI Draggable列表中拖出来的。查看clone()文档，我看到我可以通过将一个或两个布尔参数(true,true)传递给clone()方法来克隆已绑定到这些元素的事件。通过这些论点，事情变得奇怪了。如果我只是使用如下所示的clone() ，那么事情就会按预期工作。 $(“.draggable”).draggable({ connectToSortable: “.sortable”, helper: function(e) { return $(this).clone(); } }); 在上面的示例中，我获得了无限的克隆，但是我的事件与克隆的元素相关联也没有被克隆。那么，当然，我想为这个clone()方法添加一个或两个参数，这样我也可以克隆事件！ $(“.draggable”).draggable({ connectToSortable: “.sortable”, helper: function(e) { return $(this).clone(true); } }); 但这使得事情只能克隆一次。有关示例，请参阅下面的小提琴！这是clone(true)的小提琴，它只克隆一次： http ： //jsfiddle.net/og937wy7/9/ 这里有一个clone()的小提琴，它克隆了很多次。 http://jsfiddle.net/og937wy7/10/

开始时取消可拖动的div: 是）我有的：可拖动的div在启动时具有警报并在删除时恢复。我需要的：当用户尝试拖动div时，会弹出一个警告，提示您无法拖动它，拖动甚至在任何位置之前停止。

jQuery可拖动删除而不改变其他元素的位置: 我正在构建一个关于jQuery的页面布局配置系统。因此，使用我的网站的每个人都可以通过在网页上移动元素来使其变得个性化。但是，我有一个问题。我页面上的每个元素都是一个可拖动的div，如果需要，可以选择从页面中删除。当用户想要删除元素时，他点击内部div并调用以下函数： $(function() { $(‘.close’).click(function(){ $(this).parent().hide(); }); }); 当用户想要在页面上添加元素时，他点击链接并调用followinf函数： function addNewWidget(page_name, size){ var page = $(‘#’+page_name); var closeDiv = $(document.createElement(“div”)).attr(“class”, “close”).html(‘X’); closeDiv.click(function(){ $(this).parent().hide(); }); var div = $(document.createElement(“div”)) div.attr(“class”, “drag”); div.appendTo(page); closeDiv.appendTo(div); div.draggable({ containment: “#page”, scroll: false, grid: [200, 200] }); div.css(“top:0; left:0”); div.addClass(size); div.addClass(‘widget’); } 一切正常，但当元素被删除时，页面上的其他元素正在向上移动。这是因为代码中的元素定位。代码中的这些div在div之前，已被删除，其绝对顶部由-heghtOfRemovedElement更改有没有办法阻止其他元素向上移动？

简单的jQuery draggable实现没有jQuery-UI – 如何关闭？: 我在这里定制了一个简化的“可拖动”函数：没有jQuery-UI的可拖动，这是我到目前为止所拥有的： $.fn.extend({ canDragMe: function(){ return this.each(function() { var $this = $(this); $this = $(this); return $this.css(‘cursor’, opt.cursor).on(“mousedown”, function(e) { var $drag = $this.addClass(‘draggable’); drg_h = $drag.outerHeight(), drg_w = $drag.outerWidth(), pos_y = $drag.offset().top + drg_h – e.pageY, pos_x = $drag.offset().left + drg_w – e.pageX; $drag.on(“mousemove”, function(e) { $(‘.draggable’).offset({ top:e.pageY + pos_y – drg_h, left:e.pageX + […]

Jquery Live and Draggable: 我使用Jquery Live绑定将click事件绑定到图像。我第一次点击图像时，simplemodal弹出窗口启动和拖动工作正常。之后，simplemodal弹出窗口仍然启动，拖动项目不会拖动。有任何想法吗？实时点击事件代码： $(“table tr td img:not(.Help)”).live(“click”, function(){ $(“#draggable”).draggable({ containment: ‘parent’, drag: function(e, ui){ alert(“dragging”); } }); $(“#modal”).modal({ onShow: function(){ $(“html”).css(“overflow”, “hidden”); }, onClose: function(){ $(“html”).css(“overflow”, “auto”); $(“table tr td img”).live(“click”, function(){}); $.modal.close(); } }); });

Jquery draggables：删除元素会更改其他已删除元素的位置: 当放置/放置元素（通过从一个DIV拖动到另一个DIV）然后在删除的DIV中移除一个元素时，其中一些元素正在改变位置。这是一个测试场景： http ： //jsfiddle.net/TcYHW/8/ 主要代码： $(“.d”).draggable({ containment: ‘#dropwin’, stack: ‘#dragables div’, cursor: ‘move’, }); 我怎么能避免这个？我发现，元素放置在起始位置的相对位置。即使有些东西被移除，我怎样才能让它们粘在掉落的位置？我找到了两个近乎相似的问题，但没有一个令人满意的答案：使用draggables和resizables删除Jquery div jQuery可拖动删除而不改变其他元素的位置

使用JQuery-Ui Droppable定位拖动，删除和追加的项目: 我正在使用JQuery-ui draggable＆droppable。我想将删除的元素添加到drop-target容器中，同时保留它在删除时的明显位置。使用.html（）可以保留.draggable（）函数添加的位置数据，但由于它们成为新元素的子元素，因此它们会捕捉到相对于该元素的新位置。我试用了helper：clone，但发现它删除了所有定位信息。这是我的代码，它将删除的项添加到放置目标，并在每次删除上一个项时生成一个新的拖动项。它起作用，除了掉落元素的定位是错误的 – 它们应该保持它们在掉落时的视觉位置。 var $foo = 1; var bar = “drag-” + $foo; $(“.origin div”).addClass(bar); $( “.origin div” ).draggable({ containment: “.modal” }); $( “.droppable” ).droppable({ accept: “.origin div”, drop: function( event, ui ) { $(“.droppable”).append($(‘.origin’).html()); succeed(); } }); function succeed() { $foo++; var bar = “drag-” + $foo; $(‘.origin’).html(“Drag […]

Jquery Draggable UI覆盖了draggable-enabled div中HTML元素的正常浏览器行为: 我有一个jquery ui draggable div，由于可拖动，HTML内容的行为不正常。 This text is not selectable. When I try to select it, the popup div is dragged. Lots of text here, vertical scrollbar appears. But clicking the scrollbars don’t work (doesn’t scroll the content). Each click (mousedown-mouseup) is considered “dragging”. 如何防止可拖动的ui覆盖HTML元素的正常浏览器行为？

可拖动元素在另一个可拖动元素中: 这里的小提琴更不用说我想做的事了： http ： //jsfiddle.net/EUZS5/2/ 。我在swiper中有不同的元素，在一些幻灯片里面有一个可拖动的元素。目前，当我拖动箭头时，它也会拉动幻灯片（这不是我想要的行为:)）我试图在拖动事件上使用’stopPropagation’，但它无助于阻止幻灯片移动。任何想法如何实现这一目标？我使用hammerjs和idangerous.swiper。 $(document).ready(function(){ var mySwiper = new Swiper(‘.swiper-container’,{ pagination: ‘.pagination’, paginationClickable: true }) var left; $(‘.arrow’).hammer({}).on(“dragstart”, function(ev) { left = $(this).css(‘left’).replace(/[^-\d\.]/g, ”); }) $(‘.arrow’).hammer({}).on(“dragright”, function(ev) { var distance = parseFloat(left)+parseFloat(ev.gesture.deltaX); $(this).css(‘left’, distance+’px’); }) $(‘.arrow’).hammer({}).on(“dragleft”, function(ev) { var distance = parseFloat(left)+parseFloat(ev.gesture.deltaX); $(this).css(‘left’, distance+’px’); }) });