Question

我有一个书型项目。我有一些功能，所有用户都可以向页面添加注释，并在必要时拖放以对其位置进行调整。 d＆amp; d正在成功运作。我有一个绑定到div div的mouseup事件来捕获新位置，例如left，top等...

这很好用，以后我会触发一个函数来索引页面上基于类＆＃34; rect＆＃34;的所有div（注释）。

$.each('.rect',function(){
    addToIndex(this)
})

我将所有div属性存储在索引中，以便在用户返回页面时重新创建它们。如果没有拖动div，这可以正常工作。所有属性都是正确的，稍后可以在页面上重新创建。但是，如果div被拖动，div仍保留原始属性而不是新拖动位置。

由于某种原因，DOM中没有更新拖动的div。我可以在删除后跟踪div的属性并更新它们否则div不会显示在丢弃的位置。如何使用jQuery强制在DOM中更新被删除的对象？在这种情况下，我是否必须直接在DOM中工作而不是jQuery？

好的，这里有更多细节

一旦拖动对象被删除，我捕获位置，然后想要将其作为数据添加到元素...这里的片段

// capturing the literal position of element after dragging

var lx = $(obj).position().left - offPos.left
var uy = $(obj).position().top 
var ux = $(obj).position().left - offPos.left +  $(obj).width()
var ly = $(obj).position().top +  $(obj).height()

var rb = new Array(lx,uy,ux-lx,ly-uy)   

var rbstr = rb.join(",")

// before dragging rbstr value is  593,31,135,40

console.log(rbstr) // outputs 948,13,135,40

//updating the element with new data here

$(obj).attr("data-rb",rbstr)

console.log(rbstr) // outputs 948,13,135,40 which is correct
// everything here indicates the element has been updated

但是当我尝试读取具有相同类的所有元素来存储它们的属性时，更新的元素的属性不会更新，但就像它们在拖放之前的位置一样。

     $.each('.rect',function(){
        var allData = $(this).data()
        console.log($(this).data()) 
       // is correct for all elements except the dragged element
        pageAnnots[thisDoc.currentPage].push(allData)
    })

希望这能提供有关问题的更多详细信息。注意我可以调整＆＃39; rect＆＃39;并且数据得到了更新。

当＆＃39; rect＆＃39;被删除它是一个代理，并且更新数据不会发生在原始拖动的＆＃39; <＆＃39;

更新：我发现了问题 - 我正在使用

分配数据

 $(this).attr('data-x',n)

然后使用

检索数据

 $(this)data()

显然，如果您使用“attr”分配数据。你必须同样使用相同的＆＃39; attr＆＃39;方法

Answer 1

HTML

<body>

<div id="draggable" class="ui-widget-content">

  <p>Drag me around</p>
</div>

<input type="Button" name="" value="nextPage" id="next">


</body>

的jQuery

  $(function() {
        $("#draggable").draggable();    

        $("#next").on("click",function() {
            var top = $("#draggable").css("top");
            var bottom = $("#draggable").css("bottom"); 
            var left =   $("#draggable").css("left");
            var right =   $("#draggable").css("right");
            //send them to next page
        });

   });

希望这是你想要的。可拖动函数为div添加了一个style属性，如果这是你更新DOM的意思。

jQuery拖动元素未在DOM中更新

1 个答案: