jqueryUI左右拖动效果扩展

2019独角兽企业重金招聘Python工程师标准>>>

1，应用jqueryUI必要的样式和js

2，左右框内容 和样式
<!-- css -->
     #sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 250px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
    font-family: "楷体";
    height: 270px;
    overflow: auto;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 100px;
   font-family: "楷体";
  }
  #sortable2 li {
    border: 1px solid #fcefa1;
    background: #fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
    color: #363636;
    touch-action: none;
  }
 <!-- html --
	<ul id="sortable1" class="connectedSortable">
	    <li class="ui-state-default" id="Item1">Item 1</li>
	    <li class="ui-state-default" id="Item2">Item 2</li>
	    <li class="ui-state-default" id="Item3">Item 3</li>
	    <li class="ui-state-default" id="Item4">Item 4</li>
	    <li class="ui-state-default" id="Item5">Item 5</li>
	 </ul>
	 <ul id="sortable2" class="connectedSortable">
	 </ul>
3.js
        $(function(){
        
             /** sortable start **/
	     $("#sortable1, #sortable2" ).sortable({
	     	 connectWith: ".connectedSortable",
     	         start: callback,
		 remove: callback,
		 receive: callback,
		 stop: callback
	      }).disableSelection();
    	    /** search btn start **/
    	 
    	      var msg = "";
		 var val;
		 function callback(e, ui) {  
		  if (e.type == "sortstart") {
		   //ui.item.text() 获取当前拖动的元素内容
		   msg = "你选择了游戏：" + ui.item.text();
		  } else if (e.type == "sortremove") {
		   msg += "，从列表" + e.target.id;
		  } else if (e.type == "sortreceive") {
		   msg += "移至列表" + e.target.id + "。";
		   val=e.target.id;
		  } else if (e.type == "sortstop") {
		  		var itemId = ui.item.attr("id");//获取当前移动对象的 id
		  		if(val=='sortable2'){
		  			if($("li #"+itemId).length<=0){
			  			var zz = $("#"+itemId).append("<input type='checkbox                                            ' id="+itemId+"  />");
			  			$("#sortable2").append(zz);
		  			}
		  		}else{
		  			$("li #"+itemId).remove();
		  		}
		  }
 		}
	 }）；

jqueryUi-API参考

转载于:https://my.oschina.net/u/2242194/blog/651285