JQ-UI使用步驟-1:

(1)API Documentation > (左側) Interactions > Draggable Widget

https://jqueryui.com/droppable/
找一個喜歡的樣式

(2)效果內找出關鍵字 droppable draggable

    <script>
      $(function () {
        $("#draggable").draggable();
        $("#droppable").droppable({
          drop: function (event, ui) {
            $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
          },
        });
      });
    </script>

(3)搜尋可以怎麼更改或使用

API Documentation > (左側) Interactions > Draggable Widget
https://api.jqueryui.com/draggable/
API Documentation > (左側) Interactions > Droppable Widget
https://api.jqueryui.com/droppable/

(4)增加的方式:

新增 找到可使用的地方 +「,」 繼續使用

          drop: function (event, ui) {
            // 自己改顏色
            $(this).addClass("green").find("p").html("apple");
            // 或
            //.css('backgroundColor', 'green')
          },     // 新增 找到可使用的地方 +, 繼續使用(記得把function ()變數刪除)
          out: function () {
            $(this).find("p").html("移出去了");
          },     // 新增 找到可使用的地方 +, 繼續使用(記得把function ()變數刪除)
          over: function () {
            $(this).find("p").text("移進來了");
          },

(5)查找效果位置:console.log()看一下

           drop: function (event, ui) {
            // 想知道event,看一下
            console.log(event); //target: div#droppable.ui-widget-header.ui-droppable
            // 想知道 ui,看一下
            console.log(ui); //找到{draggable:}這個位置

            console.log(ui.draggable); //可以看是哪一層(游標指過去) 
            //0: div.draggable.ui-widget-content.ui-draggable.ui-draggable-handle

            ui.draggable.hide();

JQ-UI使用步驟-2:CSS變色的秘密

點了就會把這個類別放上去因此換色

             #apple .ui-selected {
              background: #2314f3;
              color: white;
            }

類別直接拿來用! 就不用再寫選定誰

            var temp = $("#apple .ui-selected").text(); // 'apple';
            console.log(temp);
            $("#mySelected").text(temp);

JQ-UI使用步驟-3:日曆

https://api.jqueryui.com/datepicker/
https://jqueryui.com/datepicker/#date-range

(1)屬性 : 設定

(2)dateFormat: dateFormat，設定日曆格式，會回去抓"yy/mm/dd"

      $(function () {
        var dateFormat = "yy/mm/dd", //被抓
          from = $("#from")
            .datepicker({

              defaultDate: "+1w", //一周
              changeMonth: true, //
              numberOfMonths: 3,

              // 屬性 : 設定

              changeYear: true, //開啟年份下拉
              yearRange: "c-1:c+2", //設定年分  系統年-1~+2年
              dateFormat: dateFormat, 
         //設定日曆格式  會回去抓"yy/mm/dd"
         //JQ給的dateFormat:自己寫的dateFormat

            })

JQ-UI使用步驟-4:卷軸

(1)被後蓋前，無效而方框不會因拉動變色，想要效果後面加上refreshSwatch()

(2)範例只有一個，但此時有三個#red, #green, #blue"==>使用this

      $("#red, #green, #blue").slider({
          orientation: "horizontal", //橫向
          range: "min", //max
          max: 255, // (o)
          value: 127,
          // slide: refreshSwatch,  //1.slide: 被後蓋前，無效而方框不會變色

          //把上面範例 卷軸裡面有數字↓↓↓↓↓↓ code拿來用
          create: function () {
            //範例只有一個，但此時有三個#red, #green, #blue"
            //使用this(這個)
            $(this).find(".custom-handle").text($(this).slider("value"));
          },

          slide: function (event, ui) {
            refreshSwatch(); //2.把前面的refreshSwatch搬過來,+()執行
            $(this).find(".custom-handle").text(ui.value);
            console.log(ui);
          },

JQ-UI使用步驟-5:查閱:使用console.log(this);

          change: function (event, ui) {
            // 滑動中會跟著變色
            refreshSwatch();
            console.log("change");
            console.log(this);
            $(this).find(".custom-handle").text(ui.value);
          },

JQ-UI使用步驟-6:.animate()

.animate()在Jq不能改背景色，跟UI有各自的分工
https://api.jquery.com/animate/#animate-properties-duration-easing-complete
(For example, width, height, or left can be animated but background-color cannot be,
unless the jQuery.Color plugin is used).

JQ-UI使用步驟-7:Effect

https://api.jqueryui.com/show/
https://jqueryui.com/show/

(1)可以直接挑效果:Ex:"explode"

        function runEffect() {
          $("#effect").show("explode", { }, 500,callback);
        }

(2)選擇樣式：搜尋XXXX-effect

2-1.從文件得知樣式的的屬性變更在第二格(options)

.show( effect [, options ] [, duration ] [, complete ] )

2-2.搜尋explode-effect，選擇喜歡的貼上
https://api.jqueryui.com/explode-effect/

        function runEffect() {
          $("#effect").show("explode", { pieces: 4 }, 500,callback);
        }