jquery - jQuery 中克隆元素的问题

Question

我的 jQuery 代码有一些问题。问题是，我的代码中克隆的元素无法调整大小。我试图从该网站的其他答案中获取一些指南，但似乎没有用。

$( function() {
    $( "#sortable" ).sortable({
      revert: true,
	  handle: '.sorthandle'
    });
     
	 
     $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid",
	  handle: '.draghandle'
	  
    });
    $( "ul, li" ).disableSelection();
	$('.ui-state-default').resizable();
	$(".uhoh").resizable();
  } );

body {
	font-family: Arial, Helvetica, sans-serif;
}

table {
	font-size: 1em;
}

.ui-draggable, .ui-droppable {
	background-position: top;
}

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
  li { margin: 5px; padding: 5px; width: 150px; }
  .draghandle { width: 20px; height:20px; background:red; color:white;}
  .sorthandle {width:20px; height:20px; background:green; color:white;}

<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<table>
 <tr>
 <td>
<ul>
  <li id="draggable" class="ui-state-highlight uhoh">Drag me down <span class="draghandle"> D </span>        <span class="sorthandle"> S </span>
 
  </li>
</ul>
 </td>
 <td>
<ul id="sortable">
  <li class="ui-state-default">Item 1 <span class="sorthandle"> S </span></li>
  <li class="ui-state-default">Item 2 <span class="sorthandle"> S </span></li>
  <li class="ui-state-default">Item 3 <span class="sorthandle"> S </span></li>
  <li class="ui-state-default">Item 4 <span class="sorthandle"> S </span></li>
  <li class="ui-state-default">Item 5 <span class="sorthandle"> S </span></li>
</ul>
</td>
</tr>
</table>
 <span class="draghandle"> D </span>
 <span class="sorthandle"> S </span>
 

Answer 1

问题的发生是因为克隆的助手(可拖动的)不会保留可调整大小的实例。因此，您需要创建一个新实例:

$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: function() {
      //Return a new resizable clone
      return $(this).clone().find(".ui-resizable-handle").remove().end().resizable();
    },
    revert: "invalid",
    handle: '.draghandle'
});

演示:

$(function() {

  $("#sortable").sortable({
    revert: true,
    handle: '.sorthandle'
  });


  $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: function() {
      return $(this).clone().find(".ui-resizable-handle").remove().end().resizable();
    },
    revert: "invalid",
    handle: '.draghandle'
  });
  $("ul, li").disableSelection();
  $('.ui-state-default').resizable();
  $(".uhoh").resizable();
});

body {
  font-family: Arial, Helvetica, sans-serif;
}
table {
  font-size: 1em;
}
.ui-draggable,
.ui-droppable {
  background-position: top;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}
li {
  margin: 5px;
  padding: 5px;
  width: 150px;
}
.draghandle {
  width: 20px;
  height: 20px;
  background: red;
  color: white;
}
.sorthandle {
  width: 20px;
  height: 20px;
  background: green;
  color: white;
}

<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<table>
  <tr>
    <td>
      <ul>
        <li id="draggable" class="ui-state-highlight uhoh">Drag me down <span class="draghandle"> D </span>  <span class="sorthandle"> S </span>

        </li>
      </ul>
    </td>
    <td>
      <ul id="sortable">
        <li class="ui-state-default">Item 1 <span class="sorthandle"> S </span>
        </li>
        <li class="ui-state-default">Item 2 <span class="sorthandle"> S </span>
        </li>
        <li class="ui-state-default">Item 3 <span class="sorthandle"> S </span>
        </li>
        <li class="ui-state-default">Item 4 <span class="sorthandle"> S </span>
        </li>
        <li class="ui-state-default">Item 5 <span class="sorthandle"> S </span>
        </li>
      </ul>
    </td>
  </tr>
</table>
<span class="draghandle"> D </span>
<span class="sorthandle"> S </span>