jquery-ui-draggable 相关问题

如何避免从contenteditable中删除键入的文本 在jQuery中>> 我正在使用jQuery UI可拖动组件将<span>添加到可编辑<p>的内容。 [预期输出是，第<p>段应该是可编辑的，并且可拖动组件应该能够拖放到段落，并且<p>的内容也应该是可编辑的。我的代码有问题。当我在<p>内键入内容并单击外部<p>时。从段落中删除的键入的单词。 我的代码如下： $(function() { function textWrapper(str, sp, btn) { if (sp == undefined) { sp = [0, 0]; } var txt = ""; if (btn) { txt = "<span class='w b'>" + str + "</span>"; } else { txt = "<span class='w'>" + str + "</span>"; } if (sp[0]) { txt = "&nbsp;" + txt; } if (sp[1]) { txt = txt + "&nbsp;"; } return txt; } function chunkWords(p) { var words = p.split(" "); words[0] = textWrapper(words[0], [0, 1]); var i; for (i = 1; i < words.length; i++) { var re = /\[.+\]/; if (re.test(words[i])) { var b = makeTextBox(words[i].slice(1, -1)); words[i] = "&nbsp;" + b.prop("outerHTML") + "&nbsp;"; } else { if (words[0].indexOf(".")) { words[i] = textWrapper(words[i], [1, 0]); } else { words[i] = textWrapper(words[i], [1, 1]); } } } return words.join(""); } function unChunkWords(tObj) { var words = []; $(".w", tObj).each(function(i, el) { console.log($(el).text(), $(el).attr("class")); if ($(el).hasClass("b")) { words.push("[" + $(el).text().trim() + "]"); } else { words.push($(el).text().trim()); } }); return words.join(" "); } function makeBtn(tObj) { var btn = $("<span>", { class: "ui-icon ui-icon-close" }).appendTo(tObj); } function makeTextBox(txt) { var sp = $("<span>", { class: "w b" }).html(txt); makeBtn(sp); return sp; } function makeDropText(obj) { return obj.droppable({ drop: function(e, ui) { var txt = ui.draggable.text(); var newSpan = textWrapper(txt, [1, 0], 1); $(this).after(newSpan); makeBtn($(this).next("span.w")); makeDropText($(this).next("span.w")); $("span.w.ui-state-highlight").removeClass("ui-state-highlight"); }, over: function(e, ui) { $(this).add($(this).next("span.w")).addClass("ui-state-highlight"); }, out: function() { $(this).add($(this).next("span.w")).removeClass("ui-state-highlight"); } }); } $("p.given").html(chunkWords($("p.given").text())); $("p.given").on("click", ".b > .ui-icon", function() { $(this).parent().remove(); }); $("p.given").blur(function() { var w = unChunkWords($(this)); console.log(w); $(this).html(chunkWords(w)); makeDropText($("p.given span.w")); }); $("span.given").draggable({ helper: "clone", revert: "invalid" }); makeDropText($("p.given span.w")); }); p.given { display: flex; flex-wrap: wrap; } p.given span.w span.ui-icon { cursor: pointer; } div.blanks { display: inline-block; min-width: 50px; border-bottom: 2px solid #000000; color: #000000; } div.blanks.ui-droppable-active { min-height: 20px; } span.answers>b { border-bottom: 2px solid #000000; } span.given { margin: 5px; } <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="row"> <p class="given" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. [Lorem] Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="divider"></div> <div class="section"> <section> <div class="card blue-grey "> <div class="card-content white-text"> <div class="row"> <div class="col s12"> <span class="given btn-flat white-text red lighten-1" rel="1">the Santee, thDakota</span> <span class="given btn-flat white-text red lighten-1" rel="2">America</span> <span class="given btn-flat white-text red lighten-1" rel="3">Qatar</span> <span class="given btn-flat white-text red lighten-1" rel="4">Philippines</span> </div> </div> </div> </div> </section> </div> 问题间歇出现。 我正在使用jQuery UI的可拖动组件将添加到内容可编辑 。预期的输出是，段落

我正在使用jQuery UI的可拖动组件将添加到内容可编辑 。预期的输出是，段落

为什么uibmodals仅在第二次调用时可拖动？

我将.draggable（）放在我的模态上，但它们仅在第二个调用中起作用。从服务文件中调用模态。服务文件：函数callWarningModalService（data）{var modalInstance = $ ...

如何使用jQuery在div中将图像多次拖放，以及如何在div中将图像拖放？

我的html中有2个Div。一个拖拉，另一个拖入。当我将图像从一个div拖放到另一个div时，我只能将特定图像拖动一次。我想将该图像拖动多个...

将使用JQuery拖放到段落中

我需要将拖放到 。我的代码可以工作，但是有3个问题，当我通过输入内容（假设三个单词）编辑 内容并拖动到 ... ]] < [

如何使用带有段落元素的jQuery拖放

我需要使用JQuery UI创建可自定义的段落。这是我的代码。 $（document）.ready（function（）{var named = $（“ p.given”）。text（）; var new_given = Given.replace（/ blank / g，'

jquery每个函数并拖放jui ui

为什么当我拖放2个“ Android”时，在#docs内部有3个“我希望#dz中的每个Android都拥有一个li？和6当我放弃3等等... $（“＃dz”）。droppable（{accept：“ .systeme”，...

在第二拖曳错误的地方可拖动的下降

我试图从“存储”到投掷的插槽拖到“模板”（最初为克隆）。此后我希望能够拖动的项目放到我所希望的任何插槽。拖拽元素设置如下：...

从jQuery的可拖动STOP停止事件传播的onclick

我有一个可拖动DIV，可拖动使用jQuery UI拖动库。我对DIV的onclick处理程序，但是当我拖动的div它就会自动触发单击处理程序，这是我不想要的。拖动...

jQuery UI的拖动与iframe的错误可投放位置手柄

我在使用jQuery UI的拖/放的问题。我需要拖动元素加入到含有内可投放区域的iframe。当我在左边拖动项目拖放到的iframe，它没有工作，因为我...

jQuery的拖放模拟不过去拖动工作

我试图模拟阻力和使用jQuery的UI jQuery的模拟-EXT插件拖放模拟。在我给场景的细节，让我在这里告诉你的JS小提琴。我有3 ...

jQuery拖放工作文件，但不是文件夹

我正在使用jquery和jquery UI插件来拖放元素（文件夹和文件），就像在文件浏览器中一样。我可以设法让文件进入文件夹，但不能进入文件夹......

jQuery可拖动的可排序输入元素

我使用jQuery UI库来拖动和排序元素：http：//jqueryui.com/demos/sortable这工作正常，但我不能拖动输入元素，如textarea。这些textarea是禁用的，所以不需要......

在可拖动的停止事件上清空droppable / sortable元素的HTML

我正在使用jQuery UI进行可拖动和可排序以创建拖放表单构建器。当用户停止拖动时，我希望可放置区域为空，因为我正在使用重新填充的函数...

jquery将可排序列表中的元素拖放到另一个列表中，仅用于分配（不移动）

我们有2个可排序列表（必要的可排序），我希望能够从列表1中的元素中拖动元素而不移动列表2或列表1中的任何元素，当我放弃...时

拖动DIV时不会触发功能

我有.main-container DIV，其中有2个孩子DIV，我想让这些DIV可拖动。我正在利用jquery-ui实现这一目标。如果我写下面的代码，我可以拖动：...

jquery ui draggable防止点击外面

我有一个可拖动的div，它的移动受限于y轴。我的代码：$（“。drag”）。draggable（{axis：“y”}）;这很好用。但是，这个div接近其他有点击事件的div。在...上...

Jquery - 可拖动功能多边形父级的Containment属性

引用https://jqueryui.com/draggable/我能够在父元素（例如div）中实现拖放功能。但是我需要让这个可拖动的功能在多边形内工作......

如何自动化角度拖放列表

问题：尝试模拟使用angular-drag-and-drop-lists的前端中的拖放（详细说明）尝试：1.jquery-simulate：给出以下错误Uncaught TypeError：...

JQuery UI draggable：一边是超出限制

我正在使用JQuery UI来实现可调整大小/可拖动的元素。现在我想为这些元素定义一个包含，限制正好调整三个（！）边的大小/拖动。例如。有一个 ...

绘制两个元素之间的连接线

我如何（或哪些工具可用）在两个或多个元素之间绘制一条线来连接它们？ HTML / CSS / JavaScript / SVG / Canvas的任意组合都可以。如果你的答案支持任何......