Tag: draggable

如何使jQuery draggable实际上捕捉到同样大小的dropable: 我使用jquery-ui正确设置了draggable和droppable。它们都是相同的大小，因此可拖动的应该适合放置在droppable上。有没有办法让可拖动的按扣进入可放置的中间，以便完全覆盖它？似乎我使用snap：参数它只是捕捉到边缘，而不一定是在droppable的中间。

可拖动阻止触摸事件: 我试图用拖动来回移动一个div。这部分工作正常，直到div具有可滚动的内容。由于滚动条，这在桌面上不是问题，但触摸设备上会出现问题。由于触摸事件与拖动事件冲突，我无法滚动内容。我试图创建一个条件来检测拖动是否比垂直更水平.. 我的希望是在垂直触摸交互期间阻止拖动，但UI拖动方法仍然会触发并覆盖触摸事件。我正在使用touch-punch插件在触摸设备上进行可拖动的工作，所以可能在那里的某些事情使情况变得复杂。如果我可以阻止UI拖动方法完全触发直到满足水平拖动条件，那将是很好的。我认为这可以消除干扰。 // note the condition inside the drag function start: function(e){ // get starting point of the drag startDragX = e.pageX; startDragY = e.pageY; }, drag: function(e, ui){ // prevent drag until user has moved 30px horizontally if (Math.abs(e.pageX – startDragX) < 30){ ui.position.left = 0; } […]

jQuery可以使用droppable进行排序: 我的小提琴： http ： //jsfiddle.net/Yc9WY/42/ 你在这里看到的是两组，每组有3个可放置的容器。您可以将事件从组1移动到组2，并移动到任何插槽中。这很好用。一旦一个组已满，我想让用户能够通过上下移动事件来对该组进行排序。如果他们选择，他们仍然可以将事件移出组。您将看到我注释掉的代码，我开始集成可排序的库，但我的行为很奇怪。注意：我无法单独替换我的draggable / dropable。我需要明确定义可放置区域（每组3个），以便事件可以存在于组1的插槽1和3中。这是我的代码 $(document).ready(function() { // $(“.sort”).sortable({ // revert: true // }); $(“.drag”).draggable({ //connectToSortable: “.sort”, revert: true //helper: clone }); $(“.sort”).droppable({ drop: function(event, ui) { if (!($(this).children(“.drag”).size() == 1)) { $(this).append(ui.draggable); ui.draggable.css({ left: 0, top: 0 }); } } }); }); Group 1: […]

JQuery draggable – 没有重叠: 是否有可能说“可拖动的div – >没有重叠”？我认为主要问题是：绝对; … 对？善待彼得

jQuery：创建一个圆形滑块: 你可能以前看过JavaScript滑块： http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html 我想象的是一个圆形滑块。它将由圆圈上一点处的可拖动按钮组成 – 该按钮可以沿着环的任何位置拖动。该值取决于按钮的位置（想想时钟）。

Jquery UI Draggable：将帮助器对齐鼠标位置: 使用jQuery我有一个可拖动的元素。它是一个大小为200 x 40的div。当然，用户可以通过单击div中的variuos位置来开始拖动此div。我想要的是当startdrag事件发生时，无论用户开始拖动的div在哪里，helper（clone）div总是以相同的方式与光标对齐。因此，在mousedown之后，帮助者的顶部和左侧值必须与鼠标x和y相同。我用这个coffeescript代码试过这个： onStartDrag: ( e, ui ) => ui.helper.css left: e.clientX top: e.clientY console.log( e ) 但它不起作用，我的猜测是这种情况正在发生，因为我放入的值由于鼠标移动而被可拖动插件直接覆盖。有任何想法吗？

猫头鹰旋转木马与jQuery UI Draggable: 我试图让我的猫头鹰旋转木马中的元素可拖动但它似乎没有工作。这是我的设置： HTML： JS / jQuery： jQuery(function(){ //init carousel $(“.owl-carousel”).owlCarousel({ autoPlay:false, rewindSpeed:500, navigation:false, pagination:false, slideSpeed:1500, mouseDrag:false }); //set up draggable jQuery( ‘.my-owl-item’ ).draggable({ start: function( event, ui ) {console.log(‘dragging’);}, helper : ‘clone’ }); }); 我已禁用鼠标拖动旋转木马，因为我可能是原因。正在触发可拖动的启动function – 它按预期将调试消息输出到控制台。该元素也被克隆。所以一切似乎都有效，除非我无法拖动它！任何帮助非常感谢。

jQuery UI，Draggable，Droppable，Auto Scroll: 我有一组可放置的li元素，它们接受一个可拖动的图标。项目列表位于可滚动的div元素中。我在这里放了一个简单的例子： http ： //www.nerdydork.com/demos/dragscroll/ 我想知道在拖动可拖动元素时是否有一种方法可以自动滚动元素列表。例如，假设您处于中间位置，例如http://www.nerdydork.com/demos/dragscroll/#j 。当你接近div的顶部时，它将开始向上滚动，当你接近div的底部时，它将开始向下滚动。任何人都知道如何使用jQuery实现这一目标？ UPDATE 我越走越近了。我在容器div的上部和下部创建了固定div。将鼠标hover在其上时，使用http://plugins.jquery.com/project/aautoscroll启动自动滚动现在的问题是，当我将鼠标hover在下方区域时，它会使我在字母上的拖拽变得混乱。但这似乎只是较低的自动滚动区域的问题。要查看我正在谈论的错误，请观看以下简短video： http ： //screencast.com/t/JBFWzhPzGfz 请注意，当它自动向下滚动时，hover不会超过正确的字母。在video结束时，你可以看到，如果你将鼠标hover在列表的左边缘，那么它会以某种方式重置并且似乎再次起作用。

jQuery droppables – 在drop上更改元素: 我对jQuery有点新鲜，希望有人可以帮助我。我想在删除（li）之后将元素（li）更改为另一个元素（div）。示例代码： $(“#inputEl>li”).draggable({ revert: true, opacity: 0.4, helper: “clone” }); $(“#dropEl”) .droppable({ accept: “.drag”, hoverClass: “dropElhover”, drop: function(ev, ui) { // change the li element to div here } }); 问题是，当我使用时 drop: function(ev, ui) { $(ui.draggable).replaceWith(“Some content”); } 触发上述function时，将禁用原始可拖动元素。我正在使用最新的jQuery和jQuery UI稳定版本。

Jquery UI可排序 – 在启动事件触发之前执行操作: 我已经搜索了STACKOVERFLOW和其他论坛来解决我的问题 – 如果我错过了一个有效的解决方案，请指出我。我的问题：每当在可排序列表中拖动一个元素（一个portlet div）时，我需要在实际拖动过程开始之前执行一些操作（从我在START事件被触发之前理解）。更具体一点：我的DIV为用户提供了扩展/折叠它的主体的可能性（如示例中的jquery UI页面http://jqueryui.com/demos/sortable/#portlets ）。每当拖动一个元素时，我都想触发我的折叠方法，以便拖动的唯一可视元素是折叠的DIV。无论什么时候我打电话给我的方法（像这样） $someitem.trigger(“toggle.somenamespace”) 它按预期工作，除了在sortable中触发start事件之前计算拖动帮助器的高度，因此辅助器具有处于未折叠状态的原始元素的高度。我原来的想法是：由于可排序的例如在实际拖动过程开始之前测量拖动距离的可能性（使用选项：距离），它应该可以挂钩到此流程中，例如存储原始startDrag函数（或在临时var中对可排序窗口小部件进行任何调用，使用自定义回调覆盖它，首先触发我的折叠function，然后调用原始函数以确保正确计算高度。然而 – 到目前为止，我对这种方法没有太大的成功…… 请注意，在处理程序中为拖动或在可排序事件上设置CSS属性没有达到预期效果，因为为帮助程序计算的可排序窗口小部件的高度设置为元素属性。或者 – 可能有人知道更好的方法来影响在拖动过程中显示的助手的高度，这只是我的观点，我的原始方法（在拖动过程之前更改元素，然后让小部件按照计算方式进行计算）它是有意的）将是一个更好的解决方案…… 感谢任何帮助，马蒂亚斯编辑：将可排序标志：forceHelperSize设置为true并在开始拖动器中设置ui.item /帮助器大小也不起作用，因为它可视化产生所需的效果（仅拖动折叠的项目，但停止元素一直拖下来（好像该项目仍然具有未折叠状态的高度）用帮助器测试：’原始’和’克隆’