Question

我正在研究DOM结构是这样的项目：

<div id="wrapper">

     <p> Some Text Goes Here </p>   

     <ul id="sortable">
          <li>list 1</li>
          <li>list 2</li>
          <li>list 3</li>
          <li>list 4</li>
          <li>list 5</li>
     </ul>

</div>

<textarea id="cloner" rows="50" column="50"></textarea>

我使用以下简单函数将＃wrapper.html（）附加到#cloner.val（）：

$('#cloner').val($('#wrapper').html());

现在，＃wrapper包含许多可拖动/可排序/可编辑的事件。所以，我想要的是反映textarea中的那些变化

示例：如果我将列表5 拖到列表2 位置，则DOM中的此更改应反映在textarea内部。

如何实现此?

Answer 1

您必须将停止事件附加到运行的draggable方法：

$('#cloner').val($('#wrapper').html());

可分类，可编辑等

或者您甚至可以将该代码复制到一个函数中并在stop事件中运行，因此您只需在一个位置更新它。

Answer 2

使用.sortable()停止事件，如下所示：

$( ".selector" ).sortable({
   stop: function() { $('#cloner').val($('#wrapper').html()); }
});

将div.html（）附加到textarea.val（）实时函数

2 个答案: