Question

我要求创建两个列表框，拖放从一个到另一个。我有一个添加和删除按钮，用于选择和粘贴从一个到另一个。即使双击列表框中的项目，我也应该具有相同的功能。我尝试使用选择标记HTML ...我可以双击并添加/删除btn点击。我尝试了无序列表ul标签HTML ......我能够拖放和事件获得双击。现在我需要双击，按钮点击和拖放一个解决方案的解决方案。选择或ul任何东西都没问题，但应该实现3个功能..谢谢提前

	$(function() {
	    $( "#sortable" ).sortable({
	    	connectWith:".conn" 
	    });
	    $( "#sortable" ).disableSelection();
	    $( "#sortable1" ).sortable({
	    	connectWith:".conn" 
	    });
	    $( "#sortable1" ).disableSelection();
	  });
	$('#add').click(function() {
	    //return !$('#sortable li:selected').remove().appendTo('#sortable1');
		// $("#sortable1").trigger("dblclick");
	   });
	   $('#remove').click(function() {
	    return !$('#sortable1 li:selected').remove().appendTo('#sortable');
	   });
	   $("#sortable1").on("dblclick", "li", function () {
		   $(this).remove();
	        $("#sortable").append("<li >"+$(this).text()+"</li>");
	        //$("#sortable1").remove(this);
	    });
	   $("#sortable").on("dblclick", "li", function () {
		   $(this).remove();
	        $("#sortable1").append("<li >"+$(this).text()+"</li>");
	       // $(this).remove();
	    });

.listTab{
width:75px;
}
#sortable,#sortable1{
	width:50%;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Disposition References</title>
<style type="text/css">
.listTab{
width:75px;
}
#sortable,#sortable1{
	width:50%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div style="display: inline-flex;">
<table>
<tr><td>
 <ul id="sortable" class="conn">
  <li class="listTab" class="ui-state-default">Item 1</li>
  <li class="listTab" class="ui-state-default">Item 2</li>
  <li class="listTab" class="ui-state-default">Item 3</li>
  <li class="listTab" class="ui-state-default">Item 4</li>
  <li class="listTab" class="ui-state-default">Item 5</li>
  <li class="listTab" class="ui-state-default">Item 6</li>
  <li class="listTab" class="ui-state-default">Item 7</li>
</ul> 
</td>
<td><table><tr><td id='add'>&gt;&gt;</td></tr><tr><td id='remove'>&lt;&lt;</td></tr></table></td>
<td>
 <ul id="sortable1" class="conn">
  <li class="listTab" class="ui-state-default">Item 1</li>
  <li class="listTab" class="ui-state-default">Item 2</li>
  <li class="listTab" class="ui-state-default">Item 3</li>
  <li class="listTab" class="ui-state-default">Item 4</li>
  <li class="listTab" class="ui-state-default">Item 5</li>
  <li class="listTab" class="ui-state-default">Item 6</li>
  <li class="listTab" class="ui-state-default">Item 7</li>
</ul> 
</td>
</tr>
</table>
</div>
</body>
  </html>

https://jsfiddle.net/raawdhm6/这是我的小提琴......

想要一个列表框甚至HTML中的列表，拖放，双击和按钮单击列表之间

0 个答案: