jQuery UI เช่น - ลาก (ลาก)

ก่อนหน้านี้: jQuery UI API สมาชิก - กล่องคำแนะนำเครื่องมือ (เคล็ดลับ Widget)

ถัดไป: ตัวอย่างเช่น jQuery UI - สถานที่ (droppable)

ช่วยให้เมาส์เพื่อย้ายองค์ประกอบ

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการมีปฏิสัมพันธ์ที่ลาก, ดูเอกสาร API สามารถลากและวางวิดเจ็ต (คนที่สามารถลาก Widget ที่)

ฟังก์ชั่นเริ่มต้น

เปิดใช้งานคุณลักษณะที่ลากบนองค์ประกอบ DOM ใด ๆ โดยการคลิกและลากเมาส์ใน viewport เพื่อย้ายวัตถุที่ลาก

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - ฟังก์ชั่นเริ่มต้น </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ();
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> โปรดลากฉัน! </ p>
</ div>
 
 
</ body>
</ html>

เลื่อนอัตโนมัติ

อัตโนมัติเลื่อนผ่านเอกสารเมื่อลากไปมาได้เคลื่อนย้ายออกนอกวิวพอร์ต ตั้ง scroll ตัวเลือกที่จะเปิดใช้งานจริงเพื่อเลื่อนอัตโนมัติปรับจูน, ความเร็วในการเลื่อนเมื่อเลื่อนผ่านไก scrollSensitivity และ scrollSpeed ตั้งค่าตัวเลือก

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - เลื่อนอัตโนมัติ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable # draggable2 # draggable3 {กว้าง: 100px; ความสูง: 100px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 0 10px 10px 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({เลื่อน: จริง});
    $ ( "# Draggable2") .draggable ({เลื่อน: จริง scrollSensitivity: 100});
    $ ( "# Draggable3") .draggable ({เลื่อน: จริง scrollSpeed: 100});
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> เลื่อนกำหนดเป็นจริงการตั้งค่าเริ่มต้น </ p>
</ div>
 
<div id = "draggable2" class = "UI-Widget เนื้อหา">
  <p> scrollSensitivity 100 </ p>
</ div>
 
<div id = "draggable3" class = "UI-Widget เนื้อหา">
  <p> scrollSpeed 100 </ p>
</ div>
 
<style Div = "height: 5000px ความกว้าง: 1px;"> </ div>
 
 
</ body>
</ html>

การเคลื่อนไหว จำกัด

พื้นที่ที่สามารถลากได้กำหนดโดยขอบเขตที่จะ จำกัด การเคลื่อนไหวของแต่ละที่ลาก ตั้ง axis ตัวเลือกที่จะ จำกัด การเส้นทางที่ลากสำหรับแกน x หรือแกน y หรือ containment ตัวเลือกในการระบุองค์ประกอบหลัก DOM หรือเลือก jQuery เช่น 'เอกสาร.

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - การเคลื่อนไหว จำกัด </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  .draggable {กว้าง: 90px; ความสูง: 90px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 0 10px 10px 0;}
  #draggable # draggable2 {margin ล่าง: 20px;}
  #draggable {เคอร์เซอร์: N-ปรับขนาด;}
  # Draggable2 {เคอร์เซอร์: E-ปรับขนาด;}
  # บรรจุกระดาษห่อ {ความกว้าง: 95%; ความสูง: 150px; ชายแดน: # CCC ของแข็ง 2px; padding: 10px;}
  h3 {ชัดเจนซ้าย;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({แกน: "Y"});
    $ ( "# Draggable2") .draggable ({แกน: "X"});
 
    $ ( "# Draggable3") .draggable ({บรรจุ: "# บรรจุกระดาษห่อ" เลื่อน: เท็จ});
    $ ( "# Draggable5") .draggable ({บรรจุ: "ผู้ปกครอง"});
  });
  </ script>
</ head>
<body>
 
<h3> การเคลื่อนไหวไปตามข้อ จำกัด แกน: </ h3>
 
<div id = "ลากไปมาได้" class = "ที่ลาก UI-Widget เนื้อหา">
  <p> ลากเฉพาะแนวตั้ง </ p>
</ div>
 
<div id = "draggable2" class = "ที่ลาก UI-Widget เนื้อหา">
  <p> ลากเฉพาะแนวนอน </ p>
</ div>
 
<h3> หรือเคลื่อนไหวข้อ จำกัด ในองค์ประกอบ DOM อื่น: </ h3>
<div id = "บรรจุกระดาษห่อ">
  <div id = "draggable3" class = "ที่ลาก UI-Widget เนื้อหา">
    <p> ฉันถูก จำกัด อยู่ในกล่อง </ p>
  </ div>
 
  <div class = "ที่ลาก UI-Widget เนื้อหา">
    <p id = "draggable5" class = "UI-Widget หัว"> ฉันถูกกักตัวอยู่ในองค์ประกอบหลัก </ p>
  </ div>
</ div>
 
 
</ body>
</ html>

สไตล์เคอร์เซอร์

เมื่อลากวัตถุไปยังตำแหน่งเคอร์เซอร์ โดยค่าเริ่มต้นเคอร์เซอร์อยู่ในวัตถุกลางลาก ใช้ cursorAt ตัวเลือกในการระบุตำแหน่งเทียบกับเรื่องอื่น ๆ (ระบุส่วนที่เกี่ยวกับด้านบนค่าพิกเซลขวาล่างด้านซ้ายของ) ของที่ลาก โดยการให้ค่าเคอร์เซอร์ CSS ที่ถูกต้องกับ cursor ตัวเลือกในการกำหนดลักษณะที่ปรากฏของเคอร์เซอร์ ที่ถูกต้องค่า CSS เคอร์เซอร์รวมถึง: เริ่มต้นย้ายตัวชี้เล็งและอื่น ๆ

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - เคอร์เซอร์สไตล์ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable # draggable2 # draggable3 {กว้าง: 100px; ความสูง: 100px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 0 10px 10px 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({เคอร์เซอร์: "ย้าย", cursorAt: {ด้านบน: 56 ซ้าย: 56}});
    $ ( "# Draggable2") .draggable ({เคอร์เซอร์: "เล็ง" cursorAt: {ด้านบน: -5 ซ้าย: -5}});
    $ ( "# Draggable3") .draggable ({cursorAt: {ด้านล่าง: 0}});
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> ฉันมักจะอยู่ตรงกลาง (ที่เกี่ยวกับเมาส์) </ p>
</ div>
 
<div id = "draggable2" class = "UI-Widget เนื้อหา">
  <p> เคอร์เซอร์ของฉันคือซ้ายและด้านบน -5 -5 </ p>
</ div>
 
<div id = "draggable3" class = "UI-Widget เนื้อหา">
  <p> ฉันเพียงควบคุมตำแหน่งเคอร์เซอร์ 'ด้านล่าง' ค่า </ p>
</ div>
 
 
</ body>
</ html>

เริ่มต้นล่าช้า

โดย delay มิลลิวินาทีล่าช้าเริ่มต้นการลากตั้งค่าตัวเลือก โดย distance ตัวเลือกที่ถูกกดและลากเคอร์เซอร์ไปพิกเซลที่ระบุไว้ก่อนที่จะให้การลากและวาง

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - ล่าช้าเริ่มต้น </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable # draggable2 {กว้าง: 120px; ความสูง: 120px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 0 10px 10px 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({ระยะทาง: 20});
    $ ( "# Draggable2") .draggable ({ล่าช้า 1000});
    $ ( ".ui-ลาก") .disableSelection ();
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> เฉพาะเมื่อผมลาก 20 พิกเซลและเริ่มที่จะลาก </ p>
</ div>
 
<div id = "draggable2" class = "UI-Widget เนื้อหา">
  หลังจาก <p> ไม่ว่าระยะทางที่คุณต้องลากและลากเริ่มที่จะรอให้ 1000ms </ p>
</ div>
 
 
</ body>
</ html>

เหตุการณ์

ที่ลากบน start , drag และ stop เหตุการณ์ เริ่มต้นการลากไก start เหตุการณ์ในช่วงเรียกลาก drag เหตุการณ์เรียกเมื่อลากหยุด stop เหตุการณ์

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - กิจกรรม </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable {กว้าง: 16em; padding: 0 1em;}
  #draggable UL li {margin: 1em 0; padding: 0.5em 0;} * HTML #draggable UL li {ความสูง: 1%;}
  #draggable UL li span.ui ไอคอน {ลอย: ด้านซ้าย;}
  #draggable span.count UL li {font-weight: หนา;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    var $ start_counter = $ ( "# เหตุการณ์เริ่มต้น")
      $ Drag_counter = $ ( "# เหตุการณ์ลาก")
      $ Stop_counter = $ ( "# เหตุการณ์แบบครบวงจร")
      นับ = [0, 0, 0];
 
    $ ( "#draggable") .draggable ({
      เริ่มต้น: ฟังก์ชั่น () {
        นับ [0] ++;
        updateCounterStatus ($ start_counter นับ [0]);
      }
      ลาก: ฟังก์ชั่น () {
        นับ [1] ++;
        updateCounterStatus ($ drag_counter นับ [1]);
      }
      หยุด: ฟังก์ชั่น () {
        นับ [2] ++;
        updateCounterStatus ($ stop_counter นับ [2]);
      }
    });
 
    ทำงาน updateCounterStatus ($ event_counter, NEW_COUNT) {
      // Updated รัฐภาพแรก ...
      ถ้า ($ event_counter.hasClass! ( "UI รัฐ-hover")) {
        $ Event_counter.addClass ( "UI รัฐ-hover")
          . .siblings () RemoveClass ( "UI รัฐ-hover");
      }
      // ... จากนั้นปรับปรุงตัวเลข $ ( "span.count", $ event_counter) .Text (NEW_COUNT);
    }
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget UI-Widget เนื้อหา">
 
  <p> โปรดลากฉันวิกฤติห่วงโซ่ของเหตุการณ์ </ p>
 
  <ระดับ Ul = "UI-ผู้ช่วยรีเซ็ต">
    <li id = "เหตุการณ์เริ่มต้น" class = "UI-รัฐเริ่มต้น UI-มุมทั้งหมด"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนเล่น"> </ span> "เริ่มต้น" จะเรียกว่า <span class = "นับ"> 0 </ span> x </ li>
    <li id = "เหตุการณ์ลาก" class = "UI-รัฐเริ่มต้น UI-มุมทั้งหมด"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนลูกศร-4"> </ span> "ลาก" เรียกว่า <span class = "นับ"> 0 </ span> x </ li>
    <li id = "เหตุการณ์หยุด" class = "UI-รัฐเริ่มต้น UI-มุมทั้งหมด"> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนแบบครบวงจร"> </ span> "หยุด" เรียกว่า <span class = "นับ"> 0 </ span> x </ li>
  </ ul>
</ div>
 
 
</ body>
</ html>

จับ

จะได้รับอนุญาตเฉพาะเมื่อส่วนหนึ่งเคอร์เซอร์ที่ระบุไว้ลากบนลากไปมาได้ ใช้ handle ตัวเลือกในการระบุองค์ประกอบ (หรือกลุ่มขององค์ประกอบ) ของตัวเลือกสำหรับวัตถุ jQuery ลาก

หรือป้องกันการลากเมื่อเคอร์เซอร์ที่มีมากกว่าองค์ประกอบเฉพาะ (หรือกลุ่มขององค์ประกอบ) ภายใน draggable. ใช้ตัวเลือกในการระบุตัวเลือก jQuery ยกเลิกมากกว่าที่จะ "ยกเลิก" การทำงานที่ลาก

หรือเมื่อเคอร์เซอร์องค์ประกอบที่กำหนด (หรือกลุ่มขององค์ประกอบ) ภายในลากลากได้รับอนุญาต ใช้ handle ตัวเลือกที่จะระบุยกเลิกฟังก์ชั่ลาก jQuery เลือก

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - รองรับ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable # draggable2 {กว้าง: 100px; ความสูง: 100px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 0 10px 10px 0;}
  P {#draggable เคอร์เซอร์: ย้าย;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({จับ: "P"});
    $ ( "# Draggable2") .draggable ({ยกเลิก "p.ui-Widget หัว"});
    $ ( "Div พี") .disableSelection ();
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p class = "UI-Widget หัว"> คุณสามารถลากและวางอยู่ในช่วงนี้ฉัน </ p>
</ div>
 
<div id = "draggable2" class = "UI-Widget เนื้อหา">
  <p> คุณสามารถพาฉันไปรอบ ๆ เพื่อลาก & hellip; </ p>
  <p class = "UI-Widget หัว"> & hellip; แต่คุณไม่สามารถลากฉัน </ p> ในช่วงนี้
</ div>
 
 
</ body>
</ html>

เรียกคืนสถานที่ตั้ง

เช่นเดียวกับค่าบูลีน revert เมื่อตัวเลือกที่จะหยุดที่ลากลากกลับมาลากไปมาได้ (หรือผู้ช่วยของมัน) ไปยังตำแหน่งเดิม

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - เรียกคืนตำแหน่ง </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable # draggable2 {กว้าง: 100px; ความสูง: 100px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 0 10px 10px 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({ย้อนกลับ: จริง});
    $ ( "# Draggable2") .draggable ({ย้อนกลับ: จริงผู้ช่วย "โคลน"});
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> Restore </ p>
</ div>
 
<div id = "draggable2" class = "UI-Widget เนื้อหา">
  <p> Restore ช่วย </ p>
</ div>
 
 
</ body>
</ html>

Snap องค์ประกอบกริดหรือ

ตําแหน่งที่ลากพรมแดนภายในหรือภายนอกองค์ประกอบ DOM การใช้งานของ snap , snapMode (ด้านนอกทั้งสอง) และ snapTolerance (เมื่อโทรสอดคล้องกับระยะทางที่ลากระหว่างองค์ประกอบพิกเซล) ตัวเลือก

ตําแหน่งในตารางหรือลากไปมาได้ ตาม grid ตัวเลือกขนาดที่จะตั้งเซลล์ตาราง (พิกเซลสูงหรือความกว้าง)

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - ตําแหน่งองค์ประกอบกริดหรือ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  .draggable {กว้าง: 90px; ความสูง: 80px; padding: 5px; ลอย: ด้านซ้าย; margin: 0 10px 10px 0; font-size: .9em;}
  .ui-Widget หัว P, .ui-Widget เนื้อหา P {margin: 0;}
  #snaptarget {ความสูง: 140px;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({Snap: จริง});
    $ ( "# Draggable2") .draggable ({แนป: ".ui-Widget หัว"});
    $ ( "# Draggable3") .draggable ({แนป: ".ui-Widget หัว" snapMode: "นอก"});
    $ ( "# Draggable4") .draggable ({ตาราง: [20 20]});
    $ ( "# Draggable5") .draggable ({ตาราง: [80, 80]});
  });
  </ script>
</ head>
<body>
 
<div id = "snaptarget" class = "UI-Widget หัว">
  <p> ฉันเป็นเป้าหมายชิด </ p>
</ div>
 
style="clear:both"> <br
 
<div id = "ลากไปมาได้" class = "ที่ลาก UI-Widget เนื้อหา">
  <p> ค่าเริ่มต้น (สแนป: จริง) สอดคล้องกับองค์ประกอบอื่น ๆ ทั้งหมดที่ลาก </ p>
</ div>
 
<div id = "draggable2" class = "ที่ลาก UI-Widget เนื้อหา">
  <p> ฉันเพิ่งสอดคล้องกับกล่องใหญ่ </ p>
</ div>
 
<div id = "draggable3" class = "ที่ลาก UI-Widget เนื้อหา">
  <p> ฉันเพียงแค่ชิดกับขอบด้านนอกของกล่องใหญ่ </ p>
</ div>
 
<div id = "draggable4" class = "ที่ลาก UI-Widget เนื้อหา">
  <p> ฉันสอดคล้องกับ 20 x 20 ตาราง </ p>
</ div>
 
<div id = "draggable5" class = "ที่ลาก UI-Widget เนื้อหา">
  <p> ฉันสอดคล้องกับ 80 x 80 ตาราง </ p>
</ div>
 
 
</ body>
</ html>

การแสดงผลภาพ

ให้ข้อเสนอแนะให้กับผู้ใช้เป็นผู้ช่วยทางลากวัตถุ helper ตัวเลือกยอมรับค่า 'ต้นฉบับ' (กับวัตถุที่ลากเคอร์เซอร์) 'โคลนนิ่ง' (กับเคอร์เซอร์สำเนาลากไปมาได้) หรือฟังก์ชั่นส่งกลับองค์ประกอบ DOM (องค์ประกอบในระหว่างการลากเคอร์เซอร์ไปรอบ ๆ จอแสดงผล) โดย opacity ตัวเลือกที่ช่วยควบคุมความโปร่งใส

แยกแยะความแตกต่างซึ่งเป็นที่ลากถูกลากให้ลากไปมาได้ในการเคลื่อนไหวเพื่อให้ด้านหน้า หากคุณกำลังลากใช้ zIndex ตัวเลือกในการตั้งค่าความสูงของผู้ช่วย Z-ดัชนีหรือใช้ stack ตัวเลือกเพื่อให้มั่นใจว่าเมื่อคุณหยุดลากคนสุดท้ายที่ถูกลากรายการจะปรากฏขึ้นที่ด้านบนของกลุ่มที่มีโครงการอื่น ๆ

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) - การแสดงผลภาพ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable # draggable2 # draggable3, #set div {กว้าง: 90px; ความสูง: 90px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 0 10px 10px 0;}
  #draggable # draggable2 # draggable3 {margin ล่าง: 20px;}
  #set {ชัดเจนทั้งสองลอย: ด้านซ้าย; กว้าง: 368px; ความสูง: 120px;}
  P {ชัดเจนทั้ง; margin: 0; padding: 1em 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({Helper: "ต้นฉบับ"});
    $ ( "# Draggable2") .draggable ({ทึบ: 0.7 ผู้ช่วย "โคลน"});
    $ ( "# Draggable3") .draggable ({
      เคอร์เซอร์: "ย้าย"
      cursorAt: {ด้านบน: -12 ซ้าย: -20}
      ผู้ช่วย: ฟังก์ชั่น (event) {
        กลับ $ ( "<div ชั้น = 'UI-Widget หัว"> ผมเป็นผู้ช่วยที่กำหนดเอง </ div> ");
      }
    });
    $ ( "#set Div") .draggable ({สแต็ค "#set div"});
  });
  </ script>
</ head>
<body>
 
<ระดับ H3 = "เอกสาร"> ผู้ช่วย: </ h3>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  เดิม <p> </ p>
</ div>
 
<div id = "draggable2" class = "UI-Widget เนื้อหา">
  <p> โปร่งแสงโคลน </ p>
</ div>
 
<div id = "draggable3" class = "UI-Widget เนื้อหา">
  <p> ผู้ช่วยที่กำหนดเอง (ร่วมกับ cursorAt) </ p>
</ div>
 
<ระดับ H3 = "เอกสาร"> สแต็ค: </ h3>
<div id = "การตั้งค่า">
  <ระดับ Div = "UI-Widget เนื้อหา">
    <p> เราเป็น draggables .. </ p>
  </ div>
 
  <ระดับ Div = "UI-Widget เนื้อหา">
    <p> .. มันเป็นดัชนี z ถูกควบคุมโดยอัตโนมัติ .. </ p>
  </ div>
 
  <ระดับ Div = "UI-Widget เนื้อหา">
    <p> .. มีตัวเลือกสแต็ค </ p>
  </ div>
</ div>
 
 
</ body>
</ html>

jQuery UI การลาก + จัดเรียง

ที่สามารถลากและจัดเรียงของการมีปฏิสัมพันธ์อย่างราบรื่น

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การลาก (ลาก) + เรียง (จัดเรียง) </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  UL {list สไตล์-Type: none; margin: 0; padding: 0; margin ล่าง: 10px;}
  li {margin: 5px; padding: 5px; กว้าง: 150px;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#sortable") .sortable ({
      ย้อนกลับ: จริง
    });
    $ ( "#draggable") .draggable ({
      connectToSortable: "#sortable"
      ผู้ช่วย "โคลน"
      ย้อนกลับ: "ไม่ถูกต้อง"
    });
    $ ( "UL, Li") .disableSelection ();
  });
  </ script>
</ head>
<body>
 
<ul>
  <li id = "ลากไปมาได้" class = "UI-รัฐเน้น"> โปรดลากฉัน </ li>
</ ul>
 
<ul id = "จัดเรียง">
  <li class = "UI-รัฐเริ่มต้น"> รายการที่ 1 </ li>
  <li class = "UI-รัฐเริ่มต้น"> รายการที่ 2 </ li>
  <li class = "UI-รัฐเริ่มต้น"> วาระที่ 3 </ li>
  <li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
  <li class = "UI-รัฐเริ่มต้น"> รายการ 5 </ li>
</ ul>
 
 
</ body>
</ html>