Tag: jquery ui draggable
如何以编程方式触发可拖动的行为
我在jQuery中创建了一个“2D滑块”，其中通过在边界框内拖动“手柄”来同时操作2个参数。 我已经通过在父div中嵌套“handle”div并使用jQuery UI插件来促进拖动行为来实现这一点。 html看起来像： jQuery看起来像： $(“.Slider2dHandle”).draggable({ containment: “parent”, scroll: false, drag: function(event, ui) { // calculates position and updates value input boxes } }); 我还创建了一些代码，用于将句柄重新定位到父div中任何点击的位置： $(“.Slider2d”).mousedown(function(event){ // get location of click and reposition handle to click location }); 我想要做的是修改上面的方法，以便用户可以单击父div中的某个位置，将句柄重新定位到单击位置，然后开始拖动句柄而不让鼠标按钮向上。 基本上，我需要找到一种以编程方式触发拖动function的方法。 我在这里和这里找到了一些建议，并试图通过改变上面的方法来实现他们的建议： $(“.Slider2d”).mousedown(function(event){ // get location of click and reposition handle to click location handle = […]
销毁JQuery draggable
我有一组可拖动的元素。 如何删除可拖动function？ $(‘.draggable’).draggable(‘disable’)在我的情况下不是一个选项 $(‘.draggable’).draggable(‘destroy’)返回Uncaught TypeError: Cannot read property ‘options’ of undefined
jQuery UI：可拖动滚动问题
我正在尝试使用jQuery UI构建一个可拖动/可放置的文件夹文件视图，但我遇到了一个问题，我相信它归功于帮助器。 这是我的代码： HTML Parent Directory 1 Parent Directory 2 Folder 1 Folder 2 Folder 3 jQuery $(document).ready(function () { var opts = { helper: ‘clone’, appendTo: ‘body’ //appendTo: ‘#container’ }; $(‘div.drag’).each(function () { $(this).draggable(opts); }); $(‘.dropzone, #topContainer’).droppable({ drop: function (e, ui) […]
滚动可拖动项目的内容时禁用jQuery拖动
我通常不会提出这样的问题/答案，但我想我会这样做，因为我已经看过这个问题20多次了，而且没有一个答案确实有效。 简而言之，问题是如果你有可滚动内容（ overflow: auto;在可拖动的jQuery项目内的任何地方，当你点击并拖动滚动条时，父可拖动容器随之拖动。所以，我花了一些时间来处理解。 这是一个会出现此问题的html示例： Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. 初始化元素可拖动的典型方法是这样的： $(“.draggable”).draggable()
jQuery UI可拖动/可排序 – 动态添加的项目不可拖动
我有一个可拖动/可排序的列表，我正在动态添加项目，但问题是，一旦添加了项目，就无法将它们移动到新列表。 你可以在这里看到这些function： http ： //jsfiddle.net/Y4T32/2/ 将项目从可用列表拖动到其中一个目标列表，您将看到我的意思。 现在添加一个“标注”并尝试将新项目拖动到其中一个目标列。 我在这里找到了另一个按照我的意愿工作的答案，但是无法重现他们得到的结果（当然，现在找不到答案）。 有什么洞察我在这里做错了什么？
jQuery droppable – 在拖动过程中接收事件（不仅仅是在初始拖动时）
我使用jQuery droppable （与jQuery draggable结合使用）允许用户通过从列表中拖动项目并将其放在表格上来向HTML表格添加行。 这很好用，但是目前的逻辑是，当用户在表行上拖放时，新行将被添加到它们所放置的行的下方 。 如果新行的添加位置基于用户是否放入现有行的上半部分或下半部分，那会更好。 这很容易在drop事件中计算，但是我需要在用户拖动时提供UI反馈（我将通过两个CSS类droppable-above和droppable-below来实现）。 这似乎不可能，因为over事件只发射一次; 当用户最初拖动可投放元素时。 当用户在可放置元素上时，是否可以为每次鼠标移动触发over事件？ 如果是这样，那么我就能做到这一点： $(“tr.droppable”).droppable({ over: function(event, ui) { if (/* mouse is in top half of row */) { $(this).addClass(“droppable-above”).removeClass(“droppable-below”); } else { $(this).removeClass(“droppable-above”).addClass(“droppable-below”); } }, out: function(event, ui) { $(this).removeClass(“droppable-above”).removeClass(“droppable-below”); }, drop: function(event, ui) { $(this).removeClass(“droppable-above”).removeClass(“droppable-below”); if (/* mouse is in top half of row […]
拖动后，元素变得随机不可resize
选择并拖动多个elemens后，其中一些不再可resize：resize图标从右上角消失。 可resize的图标保留在旧位置，不会移动哪些移动的元素。 要重现，请运行下面的代码，使用套索选择所有元素并拖动所选元素。 之后，resize图标会从随机元素中消失，并且这些元素不再可拖动。 如何解决这个问题？ 我试图通过添加来解决这个问题 $(“.designer-verticalline, .designer-rectangle, .designer-field, .designer-image”).resizable(); 结束drag（）方法但问题仍然存在 报道也在 https://bugs.jqueryui.com/ticket/14898#ticket 小提琴： https ： //jsfiddle.net/txbcj9qy/ .designer-panel-body { min-height: 1px; overflow: hidden; margin: 0; padding: 0; } .panel-footer { background-color: inherit; } .designer-panel, .designer-resetmargins { margin: 0; padding: 0; } .designer-verticalline, .designer-horizontalline, .designer-rectangle { font-size: 1pt; border: 1px solid #000000; } .designer-field { border: […]
JqueryUI拖动：光标与draggable元素不在同一位置
我正在使用最新版本的JQuery和JQuery UI来理解拖放function。 我面临一个小问题 – 主要是由于鼠标阻力。 正如您所看到的，我正在创建包含其中一些项目的堆栈。 现在，如果这些堆栈只是在体内 – 我的意思是div.allstacks在体内是没有问题的。 但是一旦我将所有这些堆栈放在div＃left-panel中，光标失去焦点的问题就开始了。 这意味着现在当我拖动项目时，水平滚动后 – 我的鼠标光标不在可拖动音符的相同位置。 现在问题是： JSFiddle Link [无div工作＃左侧面板]： http ： //jsfiddle.net/deveshz/YvmFf/ JSFiddle Link [不使用div＃left-panel] http://jsfiddle.net/deveshz/YvmFf/1/ 这是代码。 使用Javascript： var zindex = 10; $(“.item”).draggable({ containment: “body”, scroll: true, revert: function (event, ui) { $(this).css(“border”, “none”); return !event; }, start: function (event, ui) { $(this).css(“z-index”, zindex++); $(this).css(“border”, “2px solid […]
将Draggable连接到Sortable会导致helper元素跳转
我有一个jQueryUI可拖动对象和页面上的可排序对象。 将元素从可拖动元素拖动到可排序元素会导致拖动的元素跳到页面的左上角 。 这是演示： http ： //jsfiddle.net/travisrussi/aBhDu/1/ 重现： 将“项目5”从可拖动的div（顶部框）拖到可排序的div（底部框） 实际结果： 拖动到可排序项目时，项目5跳转到左上角 – http://sofzh.miximages.com/jquery/474OP.jpg 看似拖动的元素从相对位置切换到绝对位置 。 被拖动的’li’切换自： Item 3 对此： Item 3 当可拖动项目被拖入可排序对象时。 这是jQueryUI 1.8.12的相关代码片段 （从第3041行开始）： //The element’s absolute position on the page minus margins this.offset = this.currentItem.offset(); this.offset = { top: this.offset.top – this.margins.top, left: this.offset.left – this.margins.left }; // Only after we got the […]
如何在canvas对象上使用jquery ui draggable方法？
我试图让用户能够使用draggable方法在canvas元素周围移动一个矩形。 这是我最初的想法，但它不起作用。 我在http://jsfiddle.net/r2Zbe/设置了一个小提琴 $(“button”).click(function () { var door = bgContext.strokeRect(20, 20, 50, 150); door.draggable(); });
