<!doctype html> <html lang="en"> <head> <meta
charset="utf-8"> <meta name="viewport" content
="width=device-width, initial-scale=1"> <title
>jQuery UI 可放置元素 - 基本功能</title> <style
> #draggable { width: 100px; height: 100px;
padding: 0.5em; float: left; margin: 10px 10px
10px 0; } #droppable { width: 150px; height:
150px; padding: 0.5em; float: left; margin:
10px; } </style> <script src="https
://tutorialspoint.com/jquery/jquery-3.6.0
.js"></script> <script src="https://code
.jqueryjs.cn/ui/1.13.1/jquery-ui.js"></script>
<script> $( function() { $( "#draggable"
).draggable(); $( "#droppable" ).droppable({
drop: function( event, ui ) { $( this
).addClass( "ui-state-highlight" ).find( "p"
).html( "已放置！" ); } }); } ); </script>
<style> #draggable { width: 100px; height:
100px; padding: 0.5em; float: left; margin:
10px 10px 10px 0; border: 1px solid #dddddd;
background: #ffffff; color: #333333; }
#droppable { width: 150px; height: 150px;
padding: 0.5em; float: left; margin: 10px;
background: #fffa90; } </style> </head> <body>
<div id="draggable"> <p>拖动我到目标中</p>
</div> <div id="droppable"> <p>放置在此处</p>
</div> </body> </html>
