jQuery UI Interactions (交互)

Draggable（拖动）
定义一个div

<div style="width: 100px;height: 100px;border: 2px solid red" id="div"></div>

在js里面调用draggleable函数

 $("#div").draggable();

通过以上操作就很方便的实现了拖动效果，在H5中也可以实现拖动效果但太麻烦了，用JQuery UI 只要一行代码就可以实现
Droppable（放置）
在第一个div设置可拖动，在第二个div设置可放置然后再给第二个div绑定一个放置事件来触发函数做一些动作

<h2>Droppable(放置)</h2>
    <div style="width: 100px;height: 100px;border: 2px solid black ;float: left" id="div1"></div>
    <div style="width: 200px;height: 200px;border: 2px solid blue; margin-left: 110px;" id="div2"></div>
    <br>

当第一个div被拖动到第二个div中时，第二个div背景颜色变为红色

//先允许第一个div拖动
    $("#div1").draggable();
    //再允许第二个div放置，同时触发一个事件
    $("#div2").droppable();

    $("#div2").on('drop',function (event,ui) {
        //alert("放置");
        $("#div2").css("background-color","red");
    })

Resizable（尺寸）
直接调用方法即可，效果是一个可改变长宽的div 用鼠标拖动边就能改变

  $("#div3").resizable();

Selectable
可选中状态

<strong>世界上最美丽的人是？</strong>
    <ul id="selector">
        <li id="right">A.me</li>
        <li>B.我</li>
        <li>C.I</li>
    </ul>
    <a href="#" id="a_btn1">提交</a>

js

$("#a_btn1").button();
    $("#selector").selectable()

查看页面元素可知当选项被选中的时候类名为ui-selected
所以给这个类添加一个样式，在被选中时显示

<style>
    .ui-selected{
        background-color: #CC33FF;
    }
    </style>

再给按钮添加一个点击事件，当选中的跟正确选项的id相同时弹出对话框
假设A为正确选项

 $("#a_btn1").on("click",function () {
        if($("#right").hasClass("ui-selected")){
            alert("恭喜你答对了");
        }
    })

Sortable
效果是一个可拖动的列表列表的行位置可以互换

<h2>Sortable</h2>
    <ul id="sortable">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

$("#sortable").sortable();