jQueryUI -- 交互事件(拖拽,修改尺寸,交换位置)


<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>ali>
    <li>bli>
    <li>cli>
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();
});

你可能感兴趣的:(jQuery)