gpt4 book ai didi

javascript - Jquery .data 在可放置区域中的可拖动元素上保持未定义状态

转载 作者:行者123 更新时间:2023-12-03 06:06:31 25 4
gpt4 key购买 nike

我整个早上都在努力解决这个问题,但我似乎不明白问题出在哪里。在我的页面上有一个可拖动的文本字段。 (当您第一次将其作为“item-text-1”拖到 Canvas 时,它有一个用于测试目的的静态 ID)

当我第一次在控制台日志中向下拖动该项目时,您可以清楚地看到从 $("#item-text-1").data("test") 输出“1”,但是当您继续拖动时大约几次后,由于某种原因它会开始变得“​​未定义”,我完全不知道如何解决这个问题。我尝试执行 ui.helper.detached() 然后也将其全部删除,此时我迷失了方向。

<html>
<head>

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

<script type="text/javascript">
$( function() {

function setDraggable(el, doClone) {
el.draggable({
helper: doClone ? 'clone' : "original"
});
}

$(".pages").droppable({
accept: ".draggable",
drop: function( event, ui ) {
cloned = ui.helper.clone();
cloned.removeClass('ui-resizable');
var applyData = false;
if (ui.draggable.hasClass('cloned') == false) {
applyData = true;
console.log("this is a clone!");
cloned.addClass('cloned');
}
cloned.find(".ui-resizable-handle").remove();
cloned.find(".ui-resizable").remove();
cloned.find("resizable").remove();
cloned.removeClass('ui-resizable');
cloned.resizable().draggable();

setDraggable(cloned, false)
cloned.attr("id", "item-text-1");

$( this )
.append(cloned)

if (applyData == true) {
$("#item-text-1").data("test", "1");
console.log($("#item-text-1").data("test"));
} else {
console.log($("#item-text-1").data("test"));
}

var newTop = $(ui.helper).offset().top - $(this).offset().top;
var newLeft = $(ui.helper).offset().left - $(this).offset().left;

cloned.css("top", newTop);
cloned.css("left", newLeft);

//ui.helper.detach();
}
});
$(".pagesWrapper").droppable({
accept: ".draggable",
drop: function( event, ui ) {
ui.helper.remove();
}
})
setDraggable($(".draggable"), true);

$( "#tab-container" ).tabs();
} );

</script>
</head>
<body style="text-align:center; margin: 0;">

<div id="template-container" style="width: 880px; height: 775px; background-color: #f3f3f3; margin: auto; border: 3px solid #636363; padding: 8px;">

<div id="roles-tabs" style="padding-left: 0px; height: 90px; width: 100%; border-bottom: 1px solid #ddd;">
<div id="button-container" style="float: left; width: 60px; height: 80px; display: block;">&nbsp;</div>

<div id="tab-container" style="width: 600px; float: left; padding-right: 5px; padding-top: 5px; height: 80px;">
<ul>
<li><a href="#tabs-formfields">Data Fields</a></li>
</ul>
<div id="tabs-formfields">
<table>
<tbody>
<tr>
<td style="padding-right: 6px;">
<div id="item-textfield" name="item-textfield" class="items-textfield draggable draggable-item" style="width: 100px; height: 30px; cursor: pointer; background-color: black; color: white; z-index: 99999">
<div class="new-textfield-field">
<div class="fake-data">Text Field</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>

</div>
</div>
</div>

<div id="showPDF" class="pdf-container pagesWrapper" style="z-index: 0; padding-top: 50px; width: 880px; padding-bottom: 50px; height: 515px; overflow-y: auto; background-color: #565656;">
<div style="margin: auto;" class="canvas">

<div id="page1" class="pages" style="position: relative; margin: auto; width: 400px; height: 500px; background-color: white;">

</div><br /><br />

</div>


</div>
<br/>
<br/>
<br/>
<br/>

</div>
</body>
</html>

最佳答案

好的,这就是当前实现不起作用的原因:您有两个可放置区域:

$(".pages").droppable({
...
and
$(".pagesWrapper").droppable({
  1. 当您第一次拖动元素时,jquery ui 将创建一个克隆并将其放入页面容器中。假设克隆“no-id”。然后在可放置的页面中,“no-id”再次被此克隆

    克隆= ui.helper.clone();...克隆.attr("id", "item-text-1");

现在 dom 上有两个元素“no-id”和“item-text-1”。当您通过 id“item-text-1”将数据分配给元素时,该数据将被分配给具有该 id 的单个元素。

此处理程序完成后,您将获得第二个可删除处理程序,该处理程序还将对“no-id”元素执行其逻辑并将其从 dom 中删除。

ui.helper.remove();

现在您只剩下一个克隆:“item-text-1”。

  • 当您第二次拖动剩余的克隆时,由于页面可放置处理程序,您将创建另一个克隆,并且您将拥有两个 ID 为“item-text-1”的元素。
  • 当您现在显示“item-text-1”元素中的数据时,由于 byId 将返回第一个出现的位置,因此您将在第一次拖动时看到之前设置的数据。第二个元素没有附加任何数据。

    当调用 pageWrapper droppable 时,第一个 id 为“item-text-1”的元素将被删除,并且您将只有 dom 中的最后一个可用元素,该元素不再包含数据。

    从这里开始数据就会丢失。

    为了保留数据,您需要在克隆源对象后将其分配给新对象:

    cloned = ui.helper.clone();
    cloned.data('test', ui.helper.data('test'));

    通过这种方式,您将始终拥有数据,但请注意,您的文本控件始终是一个新控件,而不是原始克隆。

    关于javascript - Jquery .data 在可放置区域中的可拖动元素上保持未定义状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39517026/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com