jQueryUI -- 交互事件（拖拽，修改尺寸，交换位置）_jq draggable拖动替换位置-优快云博客

本文链接：https://blog.youkuaiyun.com/RedGuy_anluo/article/details/51439497

本文介绍如何使用jQuery库实现网页元素的拖拽、尺寸调整、拖放及列表排序等功能，通过JavaScript代码实现交互体验提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 拖拽到 rect2 内部
   $("#rect1").draggable();
       // 可以拖放的
    $("#rect2").droppable();

    $("#rect2").on("drop",function(event,ui){
        //alert(event);
        $("#rect2").text("drop事件")
    });

    // 可以在页面上修改尺寸
    $("#div1").resizable();

    // 可以交换标签内容的位置
    $("#url").sortable();
});