如何将jquery拖放功能转换为angular指令

Question

我想创建两个div。 在一个div中会有 用于拖动的重复项目，拖动后不应删除。  在另一个div中应该发生从一个div中获取项目的副本 完美的位置放置到这个div。

    $(document).ready(function(){
        //Counter
        counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',
            containment: 'frame',

            //When first dragged
            stop:function(ev, ui) {
            	var pos=$(ui.helper).offset();
            	objName = "#clonediv"+counter
            	$(objName).css({"left":pos.left,"top":pos.top});
            	$(objName).removeClass("drag");


               	//When an existiung object is dragged
                $(objName).draggable({
                	containment: 'parent',
                    stop:function(ev, ui) {
                    	var pos=$(ui.helper).offset();
                    	console.log($(this).attr("id"));
						console.log(pos.left)
                        console.log(pos.top)
                    }
                });
            }
        });
        //Make element droppable
        $("#frame").droppable({
			drop: function(ev, ui) {
				if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
					counter++;
					var element=$(ui.draggable).clone();
					element.addClass("tempclass");
					$(this).append(element);
					$(".tempclass").attr("id","clonediv"+counter);
					$("#clonediv"+counter).removeClass("tempclass");

					//Get the dynamically item id
					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
					itemDragged = "dragged" + RegExp.$1
					console.log(itemDragged)

					$("#clonediv"+counter).addClass(itemDragged);
				}
        	}
        });
    });

body {
	  text-align: center;
}
#wrapper {
	  text-align: left;
	  width: 720px;
	  margin-left: auto;
	  margin-right: auto;
}

#options{
	width: 200px;
	height:550px;
	border:1px solid black;
	float:left;
}

#frame{
	width:513px;
	height:550px;
	//background-image: url("../images/UK-Map.gif");
	background-repeat: repeat-y;
    	background-position: 0 0;
    	border:1px solid black;
    	float:right;
}

#tbldevs{
	border:1px solid black;
	width:80%;
	margin-left:50px;
	margin-top:10px;
}

#tbldevs th{
	text-align:center;
	height:50px;
	width:50px;
}

#tbldevs td{
	height:50px;
}


#drag1 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-business/078921-blue-metallic-orb-icon-business-tools1.png");
	width:32px;
	height:32px;
}

#drag2 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-business/078902-blue-metallic-orb-icon-business-tool-hammer4-sc44.png");
	width:32px;
	height:32px;
}

#drag3 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("http://www.mouserunner.com/images/FOwebsite_SinglePreview.png");
	width:32px;
	height:32px;
}

#drag4 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-glossy-pink-orbs-icons-business/107373-3d-glossy-pink-orb-icon-business-tool-screwdriver.png");
	width:32px;
	height:32px;
}

#drag5 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("http://www.mouserunner.com/images/ClearCons1_SinglePreview.png");
	width:32px;
	height:32px;
}

#drag6 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("http://www.mouserunner.com/images/FOwebsite_SinglePreview.png");
	width:32px;
	height:32px;
}

.ui-draggable-helperMoving {
	border: 1px dotted #000;
	padding: 6px;
	background: #fff;
	font-size: 1.2em;
	width:100px;
	height:100px;
}

.ui-draggable-helperStoped {
	border: 1px solid #000;
	width:5px;
	height:5px;
}



/* classes for dragged stuff */
.dragged1 {
	position:absolute; 
	background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-business/078921-blue-metallic-orb-icon-business-tools1.png");
	width:32px;
	height:32px;
}

.dragged2 {
	position:absolute; 
	background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-business/078902-blue-metallic-orb-icon-business-tool-hammer4-sc44.png");
	width:32px;
	height:32px;
}

.dragged3 {
	position:absolute; 
	background-image: url("http://www.mouserunner.com/images/FOwebsite_SinglePreview.png");
	width:32px;
	height:32px;
}

.dragged4 {
	position:absolute; 
	background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-glossy-pink-orbs-icons-business/107373-3d-glossy-pink-orb-icon-business-tool-screwdriver.png");
	width:32px;
	height:32px;
}

.dragged5 {
	position:absolute; 
	background-image: url("http://www.mouserunner.com/images/ClearCons1_SinglePreview.png");
	width:32px;
	height:32px;
}

.dragged6 {
	position:absolute; 
	background-image: url("http://www.mouserunner.com/images/FOwebsite_SinglePreview.png");
	width:32px;
	height:32px;
}


#element{
	border:1px solid red
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />

    <title>Where have I been? - Demo</title>
    <meta name="description" content="Where have I been?" />

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
	    google.load("jquery", "1.4.2");
		google.load("jqueryui", "1.7.2");
	</script>

	<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />




</head>

<body>

<div id="wrapper">
	<div id="options">
		<div id="drag1" class="drag"></div> <!-- end of drag1 -->
		<div id="drag2" class="drag"></div> <!-- end of drag2 -->
		<div id="drag3" class="drag"></div> <!-- end of drag3 -->
		<div id="drag4" class="drag"></div> <!-- end of drag4 -->
		<div id="drag5" class="drag"></div> <!-- end of drag5 -->
		<div id="drag6" class="drag"></div> <!-- end of drag6 -->
	</div><!-- end of options -->
	<div id="frame">
		<span id="title"><h2>What do you know?</h2></span>
		<table id="tbldevs" border="1">
			<thead>
				<tr>
					<th>
						<span id="names">John</span>
					</th>
					<th>
						<span id="names">Paul</span>
					</th>
					<th>
						<span id="names">George</span>
					</th>
					<th>
						<span id="names">Ringo</span>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>

			</tbody>
		</table>
	</div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>