Latest web development tutorials

مسج واجهة المستخدم سبيل المثال - جر (قابل للسحب)

السماح الماوس لتحريك العنصر.

لمزيد من التفاصيل حول التفاعل قابل للسحب، راجع وثائق API يمكن سحب وإسقاط الحاجيات (وقابل للسحب على القطعة) .

وظيفة الافتراضي

تمكين ميزة القابلة للسحب على أي عنصر DOM. بالنقر والسحب الماوس في إطار العرض لنقل الكائن القابل للسحب. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - وظيفة الافتراضي </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #draggable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> الرجاء سحب لي! </ P>
</ div>
 
 
</ الجسم>
</ HTML>

التمرير التلقائي

التمرير التلقائي خلال المستند عند نقل قابل للسحب خارج إطار العرض. تعيين scroll خيار صحيح لتمكين التمرير التلقائي، صقل، وسرعة التمرير عند التمرير من خلال الزناد scrollSensitivity و scrollSpeed تحديد الخيارات. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - التمرير التلقائي </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #draggable، # draggable2، # draggable3 {العرض: 100px؛ الطول: 100px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 0 10px 10px 0؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ({التمرير: صحيح})؛
    $ ( "# Draggable2") .draggable ({التمرير: صحيح، scrollSensitivity: 100})؛
    $ ( "# Draggable3") .draggable ({التمرير: صحيح، scrollSpeed: 100})؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> ومن المقرر انتقل إلى true، الإعداد الافتراضي </ P>
</ div>
 
<شعبة معرف = "draggable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> scrollSensitivity إلى 100 </ P>
</ div>
 
<شعبة معرف = "draggable3" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> scrollSpeed ​​إلى 100 </ P>
</ div>
 
<أسلوب الدرجة = "الارتفاع: 5000px؛ العرض: 1PX؛"> </ div>
 
 
</ الجسم>
</ HTML>

حركة مقيدة

منطقة قابلة للسحب التي تحددها حدود لتقييد حركة كل القابل للسحب. تعيين axis خيارات للحد من مسار قابل للسحب للمحور x أو محور y، أو containment الخيار لتحديد أحد الوالدين عنصر DOM أو محدد مسج، مثل "وثيقة '. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - حركة مقيدة </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  .draggable {العرض: 90px؛ الطول: 90px؛ الحشو: 0.5em، تعويم: الأيسر. الهامش: 0 10px 10px 0؛}
  #draggable، # draggable2 {هامش القاع: 20px؛}
  #draggable {المؤشر: ن تغيير حجم؛}
  # Draggable2 {المؤشر: البريد الإلكتروني تغيير حجم؛}
  # الاحتواء-المجمع {العرض: 95٪؛ الطول: 150px؛ الحدود: #CCC الصلبة 2px؛ الحشو: 10px؛}
  H3 {واضح: غادر؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ({المحور: "ص"})؛
    $ ( "# Draggable2") .draggable ({محور: "س"})؛
 
    $ ( "# Draggable3") .draggable ({الاحتواء: "# الاحتواء المجمع"، التمرير: كاذبة})؛
    $ ( "# Draggable5") .draggable ({الاحتواء: "الأم"})؛
  })؛
  </ script>
</ رئيس>
<body>
 
<H3> الحركة على طول القيد محور: </ H3>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
  <P> السحب العمودي فقط </ P>
</ div>
 
<شعبة معرف = "draggable2" الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
  <P> السحب الأفقي فقط </ P>
</ div>
 
<H3> أو الحركة مقيدة في عنصر DOM آخر: </ H3>
<شعبة معرف = "الاحتواء المجمع">
  <شعبة معرف = "draggable3" الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
    <P> مقيدة أنا في مربع </ P>
  </ div>
 
  <div الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
    <P معرف = "draggable5" الطبقة = "واجهة المستخدم القطعة-رأس"> كنت محصورة داخل العنصر الأصلي </ P>
  </ div>
</ div>
 
 
</ الجسم>
</ HTML>

المؤشر ستايل

عندما سحب الكائن لوضع المؤشر. افتراضيا، يكون المؤشر في منتصف سحب الكائن. استخدام cursorAt الخيار لتحديد موقف بالنسبة إلى البعض (المحددة فيما يتعلق أعلى قيمة بكسل، حق، أسفل، يسار) والقابلة للسحب. من خلال توفير قيمة CSS المؤشر صالحة مع cursor الخيارات لتخصيص مظهر المؤشر. وتشمل صالحة قيم المؤشر CSS: الافتراضي، والتحرك، مؤشر، التقاطع، وهلم جرا. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - المؤشر نمط </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #draggable، # draggable2، # draggable3 {العرض: 100px؛ الطول: 100px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 0 10px 10px 0؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ({المؤشر: "التحرك"، cursorAt: {العلوي: 56، يسار: 56}})؛
    $ ( "# Draggable2") .draggable ({المؤشر: "التقاطع"، cursorAt: {العلوي: -5، اليسار: -5}})؛
    $ ( "# Draggable3") .draggable ({cursorAt: {أسفل: 0}})؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> أنا دائما في الوسط (فيما يتعلق الماوس) </ P>
</ div>
 
<شعبة معرف = "draggable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> بلدي المؤشر الأيسر -5 وكبار -5 </ P>
</ div>
 
<شعبة معرف = "draggable3" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> بلدي السيطرة إلا على موضع المؤشر القيم "أسفل '</ P>
</ div>
 
 
</ الجسم>
</ HTML>

البداية المتأخرة

بواسطة delay ميلي ثانية تأخير بدء سحب إعدادات الخيار. من خلال distance خيار الضغط واسحب المؤشر إلى بكسل المحدد قبل السماح السحب والإفلات. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - تأخر بداية </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #draggable، # draggable2 {العرض: 120px؛ الطول: 120px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 0 10px 10px 0؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ({القطر: 20})؛
    $ ( "# Draggable2") .draggable ({تأخير: 1000})؛
    $ ( ".ui-القابل للسحب") .disableSelection ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> فقط عندما سحب بكسل 20، وبدأت في سحب </ P>
</ div>
 
<شعبة معرف = "draggable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
  بعد <p> وبغض النظر عن مقدار المسافة التي يجب أن سحب وبدأت السحب لانتظار 1000ms </ P>
</ div>
 
 
</ الجسم>
</ HTML>

حدث

القابلة للسحب على start ، drag و stop الأحداث. سحب بداية الزناد start الحدث، أثار خلال السحب drag الحدث، اندلعت عندما السحب توقف stop الحدث. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - الأحداث </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #draggable {عرض: 16em؛ الحشو: 0 1em؛}
  #draggable المجاهدين لى {هامش: 1em 0؛ الحشو: 0.5em 0؛} * أتش تي أم أل #draggable المجاهدين لى {الطول: 1٪؛}
  #draggable المجاهدين لى span.ui-رمز {تعويم: غادر؛}
  #draggable المجاهدين لى span.count {الخط الوزن: جريئة؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    فار $ 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) {
      // تحديث أول دولة البصرية ...
      إذا (! $ event_counter.hasClass ( "واجهة المستخدم للدولة، تحوم")) {
        $ Event_counter.addClass ( "واجهة المستخدم للدولة، تحوم")
          . .siblings () RemoveClass ( "واجهة المستخدم للدولة، تحوم")؛
      }
      // ... ثم تحديث أرقام $ ( "span.count"، $ event_counter) .text (NEW_COUNT)؛
    }
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم واجهة المستخدم التطبيق المصغر-القطعة المحتوى">
 
  <P> الرجاء سحب لي مما تسبب في سلسلة من الأحداث. </ P>
 
  <الطبقة UL = "واجهة المستخدم المساعد إعادة تعيين">
    <لي معرف = "الحدث بدء" الطبقة = "الافتراضية واجهة المستخدم للدولة واجهة المستخدم الزاوية للجميع"> <تمتد الطبقة = "واجهة المستخدم، رمز واجهة المستخدم-رمز-مسرحية"> </ SPAN> "بداية" ويسمى <SPAN الطبقة = "العد"> 0 </ SPAN> س </ لى>
    <معرف = "الحدث السحب" الطبقة = "عن واجهة المستخدم الزاوية الافتراضية واجهة المستخدم للدولة" لي> <الطبقة تمتد = "واجهة المستخدم، رمز واجهة المستخدم رمز السهم-4"> </ SPAN> وتسمى "السحب" <تمتد الطبقة = "العد"> 0 </ SPAN> س </ لى>
    <لي معرف = "حدث توقف" الطبقة = "الافتراضية واجهة المستخدم للدولة واجهة المستخدم الزاوية للجميع"> <تمتد الطبقة = "واجهة المستخدم، رمز واجهة المستخدم، رمز وقفة"> </ SPAN> "وقف" ويسمى <SPAN الطبقة = "العد"> 0 </ SPAN> س </ لى>
  </ UL>
</ div>
 
 
</ الجسم>
</ HTML>

مقابض

لا يسمح به إلا عند تحديد الجزء المؤشر السحب على القابل للسحب. استخدام handle الخيار لتحديد عنصر (أو مجموعة من العناصر) لمحدد مسج لكائن جر.

أو منع سحب عندما يكون المؤشر أكثر من عنصر معين (أو مجموعة من العناصر) ضمن القابل للسحب. استخدم خيار إلغاء تحديد محدد مسج حول أي إلى "إلغاء" وظيفة القابلة للسحب.

أو عندما يكون العنصر المحدد المؤشر (أو مجموعة من العناصر) داخل السحب يسمح القابل للسحب. استخدام handle الخيار لتحديد إلغاء وظيفة السحب مسج محدد. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - مقابض </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #draggable، # draggable2 {العرض: 100px؛ الطول: 100px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 0 10px 10px 0؛}
  ص #draggable {المؤشر: الخطوة؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ({مقبض: "ص"})؛
    $ ( "# Draggable2") .draggable ({إلغاء: "p.ui تطبيق مصغر-رأس"})؛
    $ ( "الدرجة، ص") .disableSelection ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P الطبقة = "واجهة المستخدم القطعة-رأس"> يمكنك سحب وإسقاط ضمن هذا النطاق فقط I </ P>
</ div>
 
<شعبة معرف = "draggable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> يمكنك أن تأخذ لي في جميع أنحاء لسحب و hellip؛ </ P>
  <P الطبقة = "واجهة المستخدم القطعة-رأس"> & [هليب]؛ ولكن لا يمكنك سحب لي </ p> في هذا النطاق
</ div>
 
 
</ الجسم>
</ HTML>

استعادة موقع

كما هو الحال مع القيم المنطقية revert عندما الخيار القابل للسحب لوقف سحب، والعودة القابل للسحب (أو مساعده) إلى الموقع الأصلي. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - استعادة الموقع </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #draggable، # draggable2 {العرض: 100px؛ الطول: 100px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 0 10px 10px 0؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ({العودة: صحيح})؛
    $ ( "# Draggable2") .draggable ({العودة: صحيح، المساعد: "استنساخ"})؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> استعادة </ P>
</ div>
 
<شعبة معرف = "draggable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> استعادة مساعد </ P>
</ div>
 
 
</ الجسم>
</ HTML>

المفاجئة إلى عناصر الشبكة أو

محاذاة عناصر حدود DOM الداخلية أو الخارجية القابلة للسحب. استخدام snap ، snapMode (الداخلية والخارجي، على حد سواء) و snapTolerance (عند الاتصال تتماشى مع المسافة القابلة للسحب بين عناصر في خلية) الخيار.

محاذاة إلى الشبكة أو القابل للسحب. بواسطة grid خيار حجم لضبط خلايا الشبكة (ارتفاع بكسل أو العرض). 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - محاذاة لعناصر الشبكة أو </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  .draggable {العرض: 90px؛ الطول: 80px؛ الحشو: 5px؛ تعويم: غادر؛ هامش: 0 10px 10px 0؛ حجم الخط: .9em؛}
  .ui تطبيق مصغر-رأس ص، .ui-القطعة المحتوى ص {هامش: 0؛}
  #snaptarget {الطول: 140px؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ({عض: صحيح})؛
    $ ( "# Draggable2") .draggable ({مبكرة: ".ui تطبيق مصغر-رأس"})؛
    $ ( "# Draggable3") .draggable ({مبكرة: ".ui تطبيق مصغر-رأس"، snapMode: "الخارجي"})؛
    $ ( "# Draggable4") .draggable ({شبكة: [20، 20]})؛
    $ ( "# Draggable5") .draggable ({شبكة: [80، 80]})؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "snaptarget" الطبقة = "واجهة المستخدم القطعة-رأس">
  <P> أنا الانحياز الهدف </ P>
</ div>
 
style="clear:both"> <br
 
<شعبة معرف = "القابلة للسحب" الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
  <P> افتراضي (المفاجئة: صحيح)، الانحياز إلى كل عنصر قابل للسحب الآخر </ P>
</ div>
 
<شعبة معرف = "draggable2" الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
  <P> أنا فقط الانحياز إلى مربع كبير </ P>
</ div>
 
<شعبة معرف = "draggable3" الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
  <P> أنا فقط الانحياز إلى الحافة الخارجية للمربع كبير </ P>
</ div>
 
<شعبة معرف = "draggable4" الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
  <P> أنا المنحازة لشبكة 20 × 20 </ P>
</ div>
 
<شعبة معرف = "draggable5" الطبقة = "القابل للسحب واجهة المستخدم القطعة المحتوى">
  <P> أنا المنحازة لشبكة 80 × 80 </ P>
</ div>
 
 
</ الجسم>
</ HTML>

ردود الفعل البصري

تقديم التغذية الراجعة للمستخدم، مساعدا لطريقة سحب الكائنات. helper يقبل الخيار القيم "الأصلي" (مع الكائنات القابلة للسحب المؤشر)، "استنساخ" (مع نسخة القابلة للسحب المؤشر)، أو ترجع عنصر DOM (العنصر خلال سحب المؤشر حول الشاشة). بواسطة opacity يتحكم الخيار مساعد الشفافية.

للتمييز الذي هو قابل للسحب سحب، والسماح القابل للسحب في الحركة للحفاظ على الجبهة. إذا كنت سحب، وذلك باستخدام zIndex الخيار لتعيين ارتفاع المساعد ض مؤشر، أو استخدام stack الخيار لضمان أنه عند التوقف عن سحب، وآخر يجري سحب البند دائما يظهر على صدارة المجموعة مع غيرها من المشاريع. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) - ملاحظات مرئية </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #draggable، # draggable2، # draggable3، #set شعبة {العرض: 90px؛ الطول: 90px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 0 10px 10px 0؛}
  #draggable، # draggable2، # draggable3 {هامش القاع: 20px؛}
  #set {واضح: على حد سواء؛ تعويم: غادر؛ العرض: 368px؛ الطول: 120px؛}
  ص {واضح: على حد سواء؛ هامش: 0؛ الحشو: 1em 0؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#draggable") .draggable ({مساعد: "الأصلي"})؛
    $ ( "# Draggable2") .draggable ({غموض: 0.7، المساعد: "استنساخ"})؛
    $ ( "# Draggable3") .draggable ({
      المؤشر: "التحرك"،
      cursorAt: {العلوي: -12، اليسار: -20}،
      مساعد: وظيفة (الحدث) {
        العودة $ ( "<div الطبقة =" واجهة المستخدم القطعة-رأس '> أنا مساعد مخصصة </ div> ")؛
      }
    })؛
    $ ( "#set الدرجة") .draggable ({كومة: "شعبة #set"})؛
  })؛
  </ script>
</ رئيس>
<body>
 
<H3 الطبقة = "مستندات"> مساعد: </ H3>
 
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> الأصلي </ P>
</ div>
 
<شعبة معرف = "draggable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> شفافة استنساخ </ P>
</ div>
 
<شعبة معرف = "draggable3" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <P> مساعد مخصص (بالاشتراك مع cursorAt) </ P>
</ div>
 
<H3 الطبقة = "مستندات"> كومة: </ H3>
<شعبة معرف = "مجموعة">
  <فئة الدرجة = "واجهة المستخدم القطعة المحتوى">
    <P> نحن draggables .. </ P>
  </ div>
 
  <فئة الدرجة = "واجهة المستخدم القطعة المحتوى">
    <P> .. انها يتم التحكم ض مؤشر تلقائيا .. </ P>
  </ div>
 
  <فئة الدرجة = "واجهة المستخدم القطعة المحتوى">
    <P> .. مع خيارات المكدس. </ P>
  </ div>
</ div>
 
 
</ الجسم>
</ HTML>

مسج واجهة قابلة للسحب + قابل للفرز

قابل للسحب وقابل للفرز من التفاعل السلس. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم السحب (قابل للسحب) + ترتيب (قابل للفرز) </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  المجاهدين {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ هامش القاع: 10px؛}
  لى {هامش: 5px؛ الحشو: 5px؛ العرض: 150px؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#sortable") .sortable ({
      العودة: صحيح
    })؛
    $ ( "#draggable") .draggable ({
      connectToSortable: "#sortable"
      المساعد: "استنساخ"،
      العودة: "باطل"
    })؛
    $ ( "ماي، لي") .disableSelection ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<UL>
  <لي معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> الرجاء سحب لي </ لى>
</ UL>
 
<UL معرف = "للفرز">
  <لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 1 </ لى>
  <لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 2 </ لى>
  <لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 3 </ لى>
  <لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
  <لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 5 </ لى>
</ UL>
 
 
</ الجسم>
</ HTML>