1

在查看了所有 jquery 可拖动克隆可能的重复项后，我仍然找不到必须是相当普遍的问题的答案。

我有一系列可以成功克隆的 DIV 元素，但是每个克隆都失去了它的可拖动功能，我查看了生成的代码，仍然无法弄清楚为什么会这样。

请问有什么线索吗？

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Cloning issue</title>
<style>
.bgblue {
background-color:#9CF;
}
.bgred {
      background-color:#F36;
  }

  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="JS/ui/jquery-ui-1.10.3.custom.min.js"></script>


  <script>

  function seCopyBox(x) {
    z = $('.seBox').eq(x).clone();
    z.insertAfter($('.seBox').eq(x));
} 

$(function() {
$( ".seBox" ).draggable();
  });

  </script>

</head>
<body>



<div class="seBox bgblue">
<p onClick="javascript:var x=$(this).closest('.seBox').index();seCopyBox(x)">COPY</p>
<p>Div A</p>
</div>

<div class="seBox bgred">
<p onClick="javascript:var x=$(this).closest('.seBox').index();seCopyBox(x)">COPY</p>
<p>Div B</p>
</div>

<div class="seBox bgblue">
<p onClick="javascript:var x=$(this).closest('.seBox').index();seCopyBox(x)">COPY</p>
<p>Div C</p>
</div>


</body>

4

2 回答 2

3

draggable()将克隆元素附加到 DOM 后再次调用它

 function seCopyBox(x) {
   z = $('.seBox').eq(x).clone();
   z.insertAfter($('.seBox').eq(x)).draggable();
}

我会使用干净的 jquery click 函数而不是内联 javascript ..

$(document).on('click','.seBox p',function(){
   var x=$(this).closest('.seBox').index();
    var z = $('.seBox').eq(x).clone();
    z.insertAfter($('.seBox').eq(x)).draggable();
}

删除内联javascript和seCopyBox函数...

于 2013-06-11T13:08:23.763 回答
1

最好.draggable()放在克隆元素上。

$(document).on('click','.seBox p',function(){
var x=$(this).closest('.seBox').index();
var z = $('.seBox').eq(x).clone().draggable();
z.insertAfter($('.seBox').eq(x));
}

反而

$(document).on('click','.seBox p',function(){
var x=$(this).closest('.seBox').index();
var z = $('.seBox').eq(x).clone();
z.insertAfter($('.seBox').eq(x)).draggable();
}

只是我的建议。

于 2013-06-11T13:21:06.827 回答