复杂的 jq 拖拽、框选拖拽，ajax传值、解决删除与拖拽冲突

*{margin: 0 auto;}
    	.dragdiv{border: 2px solid black;height: 100px;width: 800px;margin-top: 20px;}
    	span{background: red;width: 50px;height: 50px;margin: 20px;display: inline-block;}
    	.top span{
    		background: #f9f9f9;
    		border: 1px solid #fbfbfa;
    		border-radius: 6px;
    		width: 50px;
    		height: 50px;
    		font-size: 16px;
    		margin: 9px;
    		margin-top: 1px;
    		padding: 9px;
    		display: inline-block;
    		text-align: left;
    		overflow: hidden;
    		vertical-align: top; 
    	}
    	.top span:HOVER,.bottom ul li:HOVER{background: #D1D1D1} 
    	input{
    		border: none;
    		background: none;
    		height: 24px;
    		width: 100%;
    		text-overflow: ellipsis;
    		white-space: nowrap;
    	}
    	
    	.bottom_right{
    		padding: 0px;
    	}
    	ul,li{
        	margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul{
        	display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            border-bottom: 1px solid #C9C9C9;
        }
        ul:last-child{border-bottom: none;}
    	.bottom_right ul li{
    		box-sizing: border-box;
    		width: calc((100% - 10px) / 10);
    		width:-moz-calc((100% - 10px) / 10);
			width:-webkit-calc((100% - 10px) / 10);
    		border-left: 1px solid #C9C9C9; 
    		height: 50px;
    		flex:auto;         
    		line-height: 50px;  
    	}
    	li .span{
    		width: 100%;
    		height: 100%;
    		display: block;
    		overflow: hidden;
    		position: relative;
    	}
    	li .span div{
    		
    		width: 11px;
    		height: 11px;
    		padding: 1px;
		    font-size: 12px;
		    position: absolute;
		    right: 1px;
		    top: 1px;
    	}
    	.bottom_right ul li.selected,
    	.bottom_right ul li.temp-selected{background: #D1D1D1}

 

<div class="List_div1 div1" style="height: 100%;">
  <div class="top dragdiv" id="top" >    
    <span>
	<input type="text" name="name" value="王五"><br/>
	<input type="text" name="pId" value="dt1"><br/>
        <input type="hidden" name="id" value="1">
    </span>
    <span>
	<input type="text" name="name" value="李四"><br/>
	<input type="text" name="pId" value="dt12"><br/>
        <input type="hidden" name="id" value="2">
    </span>
  </div>

  <div class="bottom_right dragdiv">
    <ul> 
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
    </ul>
    <ul> 
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
    </ul>
  </div>
</div>

 

 

		
		$(function(){
	    	
			//隐藏页面，防止加载时排版混乱
			$(".List_div1").hide();
			
			$("input").prop("readonly","readonly");
			
			$(".div1").show();
			
	    	    drag.init('List_div1',"scheduling/schedulingAdd"); 
		    
		    //手术室内部拖拽
                     initSelectBox('.bottom_right',"拖拽路径","删除路径");
		}); 

		//点击任意位置，去除 class：selected
	    $("body").on("click",function() {
	    	$(".bottom_right li").removeClass('selected');
	    }); 
	    
	    //鼠标悬停
		$(".bottom ul li").hover(function() {
			$(this).css({'background':'#D1D1D1','color':'black'});
		},function(){
			$(this).removeAttr("style");
		});
		
		//拖拽
		var drag = {
	
		    class_name : null,  //允许放置的容器
			permitDrag : false,	//是否允许移动标识
	
			_x : 0,             //节点x坐标
		    _y : 0,			    //节点y坐标
		    _left : 0,          //光标与节点坐标的距离
		    _top : 0,           //光标与节点坐标的距离
	
		    old_elm : null,     //拖拽原节点
		    tmp_elm : null,     //跟随光标移动的临时节点
		    new_elm : null,     //拖拽完成后添加的新节点
		    url : null,			//ajax跳转路径
		    
		    //初始化
		    init : function (className,url){
	
		        //允许拖拽节点的父容器的classname(可按照需要，修改为id或其他)
		        drag.class_name = className;
		        
		        //ajax跳转路径
		        drag.url=url;
		        
		         //监听鼠标按下事件，动态绑定要拖拽的节点（因为节点可能是动态添加的）
		        $('.' + drag.class_