<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交互</title>
<script src="jquery-2.2.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="draggable.js"></script>
</head>
<body>
<div style="width: 100px; height: 100px;border: 1px solid gray; background-color: yellow "id="div"></div>
<div style="width: 100px; height: 100px; border: 2px solid red" id="rect1"></div>
<div style="width: 200px; height: 200px; border: 2px solid gray" id="rect2"></div>
<div style="width: 100px;height: 100px;background-color: gray;border:2px solid yellow;" id="div1"></div>
<ul id="url">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
$(document).ready(function(){
$("#div").draggable();
$("#rect1").draggable();
$("#rect2").droppable();
$("#rect2").on("drop",function(event,ui){
$("#rect2").text("drop事件")
});
$("#div1").resizable();
$("#url").sortable();
});