jQuery UI Draggable插件通过鼠标移动使所选元素可拖动。
我正在尝试为我的可拖动项目实现一种行为。 该行为描述如下： 我的盒子包含多个可拖动项目，这些项目在页面加载时排序 我可以从那个 bo 中拖动项目...
我的页面中有一个滑块，带有以下代码 我的页面中有一个滑块，带有以下代码 <div id="sale-price-range" class="price-range" data-min="200000" data-max="2000000" data-unit="R$" data-min-field="precoMinVenda" data-max-field="precoMaxVenda" data-increment="100000"></div> 我的js代码是： // Price Range $(".price-range").each(function() { var dataMin = $(this).attr('data-min'); var dataMax = $(this).attr('data-max'); var dataUnit = $(this).attr('data-unit'); var minField = $(this).attr('data-min-field'); var maxField = $(this).attr('data-max-field'); var increment = $(this).attr('data-increment'); $(this).append( "<input type='text' class='first-slider-value' name='"+minField+"' val=''/><input type='text' class='second-slider-value' name='"+maxField+"'/>" ); $(this).slider({ range: true, min: 0, max: dataMax, step: increment, values: [ dataMin, dataMax ], slide: function( event, ui ) { event = event; if(ui.value < dataMin) { return false; } $(this).find( ".first-slider-value" ).val( dataUnit + " " + ui.values[ 0 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); $(this).find( ".second-slider-value" ).val( dataUnit + " " + ui.values[ 1 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); }, stop: function(event,ui) { if(ui.value >= dataMin) { postAjaxSearch(); } } }); $(this).find( ".first-slider-value" ).val( dataUnit + " " + $( this ).slider( "values", 0 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); $(this).find( ".second-slider-value" ).val( dataUnit + " " + $( this ).slider( "values", 1 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); }); 效果很好，但如果我尝试改变 分钟：0， 到 分钟：数据分钟， 我的滑块停止工作（我无法拖动它）。它继续调用 postAjaxSearch();，但它不会更改最大/最小值，也不会移动滑块手柄。 为什么需要将 min 更改为 dataMin？ 因为我的滑块从 0 开始，但是滑块手柄从 dataMin 移动到 dataMax。 dataMin 和 0 之间的范围位于页面上，但无法移动到那里。我不想要这个，滑块应该从 dataMin 开始。 我遇到了同样的问题，我通过在最小值上使用 parseInt() 解决了它 $("#price-slider").slider({ range: true, min: parseInt(price_min), max: price_max, values: [price_min, price_max], slide: function (event, ui) { $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); 我不知道为什么会这样，这似乎是合乎逻辑的，两个极端都会起到同样的作用，但显然事实并非如此。 还有一个解决方案 我在 1.13.2 版本中遇到了同样的错误。然而，parseInt的解决方案对我没有帮助； 有什么帮助，乘以 1000 进行调整，然后除以 1000。 还是不明白问题出在哪里... 在 INIT 滑块传入参数之前是： step = 1000 min = 33900 max = 1100000 selected_min = 33900 selected_max = 1100000 初始化后，没有 * 1000 和 / 1000 滑块给了我 max_stop = 1099900 对我来说正确的是 $(element).slider({ range: true, min: min * 1000, max: max * 1000, step, values: [selected_min * 1000, selected_max * 1000], slide: function (event, ui) { const min_stop = ui.values[0] / 1000; const max_stop = ui.values[1] / 1000; $(`#${attribute}-min`).val(min_stop); $(`#${attribute}-max`).val(max_stop); }, stop: function (event, ui) { const min_stop = ui.values[0] / 1000; const max_stop = ui.values[1] / 1000; queryParams[attribute] = `${min_stop}-${max_stop}`; applyFilter(); } });
以下代码在选择 OptionOne 或 OptionTwo 时生成蓝色文本框。例如，当单击“显示选项”按钮时，左侧会出现一个蓝色文本框，然后我可以...
我在过去的 5-6 个小时里进行了挖掘，确实遇到了麻烦。我面临可拖动对象的问题。我正在尝试的是我有一个包含 18 个小的可拖动 div 的弹出窗口。我需要拖...
获取 JQuery UI Draggable 以捕捉到特定的网格（有一个扭曲）
我目前正在尝试使用 jQuery 和 jQuery UI 将“拖放”功能应用于一堆元素。应该注意的是，元素应该始终捕捉到特定的...
这是垂直居中对齐元素可拖动的示例： #draggablediv { 宽度：100px； 高度：100px； 回来...</desc> <question vote="0"> <p>这是可拖动的垂直居中对齐元素<a href="https://codepen.io/tp1415926535/pen/oNaOePX" rel="nofollow noreferrer">示例</a>：</p> <pre><code><html> <head> <style> #draggablediv { width: 100px; height: 100px; background-color: yellow; position: absolute; margin: auto 0; top: 0; bottom: 0; } </style> </head> <body> <div id="draggablediv"></div> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $(function () { $("#draggablediv").draggable(); }); </script> </body> </html> </code></pre> <p>由于“margin: auto”，可拖动元素将不再准确设置顶部值。有没有办法让它正常工作？</p> </question> <answer tick="true" vote="0"> <p>这个问题可以分为两步解决：</p> <ul> <li>为了最初将元素垂直居中，我建议以这种方式使用 FlexBox：</li> </ul> <pre><code>/* to make sure that both document root & body take the whole vertical space */ html,body { height: 100%; display: flex; align-items: center; } </code></pre> <ul> <li>要修复顶部/底部错误的偏移，您应该删除</li> </ul> <pre><code>#draggablediv { ... ... /* remove these 2 lines:*/ top: 0; /* <--- this */ bottom: 0; /* <--- this */ ... } </code></pre> <p>这是<strong>众多建议之一</strong>，另一个建议（如果您不想触及正文和文档根目录），您可以使用另一个父 div 容器来应用相同的先前规则或也使用 JQuery 将元素居中。</p> </answer> </body></html>
我的场景：带有一些对象（div）的容器（div）。对象可以在容器内移动（将选项 containment 设置为 parent）。 现在我需要一次移动多个对象。为了...
“ul”标签内的 Jquery-ui 可拖放组件 - 如何处理溢出？
我正在尝试创建一个节点图，用户可以在其中使用 jQuery-ui 将组件拖放到区域中。组件有限，用户需要将它们拖放到'ul't定义的区域...
sketch.com 上的这个叫什么？我如何在代码中实现它？ [关闭]
元素可以在画布上任意拖动，同样我想实现一个像miro boards这样的画布页面，可以在画布中水平和垂直拖动滚动条。 我没试过
我结合了jQuery draggable, selectable and droppable并且它工作正常，但是我遇到了以下问题（见下图）： 我想对嵌套项目使用 selectable 来拖动它们
How to get dropped element in a jquery sortable list [重复]
我有两个无序列表，我希望能够将第一个列表中的任何元素的副本拖到新的第二个列表中。当物品被放下时，我想访问那个元素，以便添加它......
我有一个非常特殊的问题，使用jQuery UI sortable和dragable一起使用。我希望能够在新拖动的元素的列表中得到不显示的位置。我能够得到这个，如果我 ...
使用jquery ui的可拖动widget将图像向上移动，以显示容器内所需的图像部分（当图像太大而无法容纳在容器内时）。图像可以向上拖动......
jQuery-ui-draggable将像素值转换为百分比。
设置data-offset属性时，如何将ui.position.top的值转换为百分比。.draggable({ scroll: false, axis.y", drag: function (event, ui) { y1 = $parent.height();/...。"y", drag: function (event, ui) { y1 = $parent.height();/...。
Reveal.js幻灯片内的Jquery UI可拖动定位问题
我的jquery draggable在平面html页面中正常工作（其中不存在Reveal.js）。在我的js演示文稿中，我使用embed = true [表示我没有为每张幻灯片使用整页。我只使用...
我是JQuery的初学者，我真的不知道该怎么做...我只需要在代码相等时才允许删除，例如，'Limone Salmone'只能放在'Alessandro附近...
如何使用jQuery UI获取可拖动和可调整大小的元素的坐标
我想为响应图像映射生成多个坐标（左，上，宽，高）。在管理界面中，可以在图像上创建，移动和调整大小的矩形。我可以多个...
我有一个元素列表，每个元素都有一个ID，等于该列表中的顺序。现在，我通过拖动来更改这些元素的顺序。我有以下两个...
我正在尝试捕获Javascript中的dragend事件以获取可拖动的DIV。 dragend事件根本没有触发，为什么？以及如何解决呢？ PS，我使用的是.draggable（）方法，来自：jQuery UI 1.9.2 ...
使用jQuery-ui，我将可拖动元素拖放到可拖放元素上。然后，我将droppable元素变成可拖动元素。如果然后我拖动新的可拖动元素，则需要该元素，然后...