English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. موقعي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. نص المقال

تنفيذ عملية سحب عدة عناصر مختارة باستخدام Jquery UI

تطلب المشروع تنفيذ عملية سحب وإفلات، حيث يمكن سحب عدة عناصر مختارة وتنفيذ ترتيبها عند إطلاقها في وعاء الهدف. بعد التفكير، شعرت أن jquery-ui مناسب جدًا، لأنه يقدم أحداث تفاعلية مطلوبة للمشروع. تسحب، إطلاق، ترتيب، اختيار، إلخ. ولكن في عملية التشغيل الفعلية، واجهت العديد من المشاكل، وأود أن أشرحها وأرفق لاحقًا صورة للنتائج والكود.

1. أستخدم إطار العمل bootstrap، بعد إدخال jquery-ui، عند إضافة طريقة التسحب إلى العنصر، تم إظهار رسالة بأن هذه الطريقة ليست دالة. بعد البحث عن السبب، وجدت أن هناك تضارب في سيطرة العلامة المميزة $ بين bootstrap و jquery-ui. يمكن حل هذا الأمر بإضافة هذه الجملة قبل js المدمج في jquery-ui

<script>
  jQuery.noConflict();
</script>

2. يقدم jquery-ui عملية اختيار (اختيار واحد، اختيار متعدد)، يمكن استخدام الاختيار المتعدد عن طريق الضغط على مفتاح Ctrl مع نقر الماوس أو تسحب الماوس على عدة عناصر لاختيار متعدد. عند إضافة عملية الاختيار والتسحب إلى العنصر نفسه، ظهرت مشكلة.

أ: عملية الاختيار المتعدد تتضمن التسحب على العنصر، مما يؤدي إلى تضارب مع أحداث التسحب الخاصة بالعنصر نفسه (أعتقد أن تأثير اختيار التسحب باستخدام مفتاح Shift مع نقر الماوس ليس أفضل من استخدام مفتاح Shift مع نقر الماوس).

ب: لم يتم العثور على طريقة في jquery-ui لإجراء تسحب متعدد لأعمدة مستقلة.

لا أعرف إذا كان عدم اكتشافي للطريقة التي يمكن بها استخدام jquery-ui للطرق والخصائص المدمجة، حتى يتمكن من دعم عملية الاختيار المتعدد والتسحب والنقل للعناصر المختارة. إذا كان أي قارئ يعرف، يرجى إخباري. شكرًا لك!

بشكل عام، تم اختبار العديد من خصائص أحداث jquery-ui، ومحاولة إزالة عملية التراجع والمتعددة في jquery-ui، ولكن لم يتم العثور على التأثير المطلوب. لذا، بعد التفكير، تم اتخاذ قرار بعدم استخدام عملية اختيار jquery-ui. وكتابة عملية اختيار بنفسه. بنفس طريقة تفاعل الأحداث الذي نستخدمه عادةً. (نقر الماوس لاختيار اختيار واحد، مفتاح Ctrl + نقر الماوس لاختيار متعدد، مفتاح Shift + نقر الماوس لاختيار متعدد)، ثم التكامل مع أحداث drag و drop و sort في jquery-ui لتحقيق تأثير ترتيب التراجع.

إضافةً إلى ذلك، تأثير سحب وإفلات العناصر المتعددة هو في الواقع سحب عنصر DOM مخصص، يمكن وضع جميع العناصر التي يجب سحبها في هذا العنصر. هذا يتطلب استخدام دالة helper في jQuery-ui drag، والتي تعود مجموعة جديدة من العناصر القابلة للسحب. (يمكنك العثور على بعض الحدث والخصائص الخاصة بjQuery-ui من الإنترنت. ولكن ليس واضحًا تمامًا، يجب أن تجرب بنفسك).

حسنًا، أرفق صورةً بسيطةً وكودًا

الشكل الأول (تأثير السحب والإفلات)

الشكل الثاني (نتيجة الإفراج)

لقد أرفقت لك صورة النتيجة أعلاه، اللون البرتقالي في الجانب الأيسر هو العناصر المختارة، الدائرة الحمراء هي تأثير السحب والإفلات، و3 تعني عدد العناصر المختارة؛ منطقة الأصفر على الجانب الأيمن تعتبر منطقة يمكن فيها الإفراج عن وتنظيم المحتويات. عند السحب والإفلات في هذه المنطقة، يتم ترتيب العناصر تلقائيًا بناءً على موقع الماوس، كما في الصورة، إذا تم إطلاق الماوس، فإن العناصر الثلاث في الجانب الأيسر ستنقل إلى منطقة 4. المنطقة الصفراء.

بالطبع، يجب إعادة تعيين العناصر المستهدفة للسحب والإفلات وإعداد الاستماع إلى الأحداث مثل السحب والإفلات، وكتابة منطق المستخدم المخصص. قم بنشر كودك، يمكنك استشارة مستندات jQuery-ui للحصول على بعض الحدث والخصائص.

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="assets/css/bootstrap.css" />
 <link rel="stylesheet" href="js/jquery-ui-1.12.1.dropable/jquery-ui.css" />
 <script src="js/jquery-1.11.2.js"></script>
 <script src="assets/js/bootstrap.js"></script>
 <script>
  jQuery.noConflict();　　//حل مشكلة الصراع في سيطرة jQuery
 </script>
 <script src="js/jquery-ui-1.12.1.dropable/jquery-ui.js"></script>
 <style>
  .selectable .ui-selecting{ background: #FECA40; }
  .selectable .ui-selected{ background: #F39814; color: white; }
  .selectable{ list-style-type: none; margin: 0; padding: 0; width: 80%; }
  .selectable li{
   list-style: none;
   margin: 3px; padding: 0.4em; font-size: 1.4em; height: 32px;moz-user-select: -moz-none;
   -moz-user-select: none;
   -o-user-select:none;
   -khtml-user-select:none;
   -webkit-user-select:none;
   -ms-user-select:none;
   user-select:none;
  }
  .drag_info_box{
   width:40px;
   height:40px;
   text-align: center;
   font-size:14px;
   line-height: 40px;
   background: #21aeff;
   color:#000000;
  }
 </style>
 <script>
  $(function(){
　　　　　　　// روش انتخاب چندگانه شخصی‌سازی شده
   var selected_begin_index,selected_end_index;
   $("#mydrag").on("mousedown",".selectable>li",function(e){
    var _selectable= $(this).parent();
    if(!e.ctrlKey && !e.shiftKey){ //没有按下Ctrl或Shift键
     if(!$(this).hasClass("ui-selected")){
      _selectable.children("li").removeClass("ui-selected");
     }
     $(this).addClass("ui-selected");
     selected_begin_index=_selectable.children("li").index(this);
    }else if(e.ctrlKey && !e.shiftKey){ // فقط کلید Ctrl فشرده شده است
     $(this).addClass("ui-selected");
     selected_begin_index=_selectable.children("li").index(this);
    }else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ // فقط کلید Shift فشرده شده است یا کلید Ctrl و Shift هر دو فشرده شده‌اند
     _selectable.children("li").removeClass("ui-selected");
     $(this).addClass("ui-selected");
     if(selected_begin_index!=undefined){
      selected_end_index=_selectable.children("li").index(this);
     }
      selected_begin_index=_selectable.children("li").index(this);
     }
     if(selected_end_index>=selected_begin_index){
      else{
       _selectable.children("li").eq(i).addClass("ui-selected");
      }
     }
      for(var i=selected_end_index;i<=selected_begin_index;i++){
       _selectable.children("li").eq(i).addClass("ui-selected");
      }
     }
    }
   }).on("mouseup",".selectable>li",function(e){
    var _selectable= $(this).parent();
    if(!e.ctrlKey && !e.shiftKey){ //没有按下Ctrl或Shift键
     _selectable.children("li").removeClass("ui-selected");
     $(this).addClass("ui-selected");
    }
   });
　　　　　　　　//调用拖拽事件并重新规划处理方式
   $("#mydrag .selectable>li").draggable({
    revert: "invalid",
    containment: "document",
    cursor: "default",
    distance:10,
    zIndex:9,
    opacity:0.5,
    cursorAt: {
     left: 20,
     top:40
    ,
    connectToSortable:"#mydrag .sample-group>ol",
    helper:function(event,ui){
     var drag_info_box=$("<div></div>").addClass("drag_info_box");
      drag_info_box.append($("<span></span>"));
      drag_info_box.append($('<input type="hidden" />'));
     return drag_info_box;
    ,
    start: function( event, ui ) {
     var _drag_ele=ui.helper;
     _drag_ele.children(\"span\").eq(0).text($(\"#mydrag .selectable>li.ui-selected\").length);
     var selected_li_seq="";
     $(\"#mydrag .selectable>li.ui-selected\").each(function(){
      selected_li_seq+= $(\"#mydrag .selectable>li\").index(this)+\",\";
     });
     _drag_ele.children(\"input\").eq(0).val(selected_li_seq.substr(0,selected_li_seq.length-1));
    ,
    stop:function( event, ui ) {
     $(\".selectable li\").removeClass(\"ui-selected\");
    }
   });
   $(\"#mydrag .sample-group>ol\").droppable({
    activeClass: \"ui-state-highlight\",
    drop: function( event, ui ) {
     //这块如果是拖放到排序面板会执行两次,将该内容放到排序的stop方法中
    }
   });
　　　　　　　　//排序完毕后执行真正的释放操作
   $( \"#mydrag .sample-group>ol\" ).sortable({
    revert: true,
    stop: function( event, ui ) {
     if(ui.item.hasClass(\"drag_info_box\")){
      var selected_li_arr=ui.item.children(\"input\").eq(0).val().split(',');
      for(var i=0;i<selected_li_arr.length;i++){
       var _group_li_=($(\"<li></li>\"));
         .addClass(\"ui-state-highlight ui-sortable-handle\").text($(\"#mydrag .selectable>li\").eq(selected_li_arr[i]).text());
       //تركيب علامة التحميل على العنصر
       $("#mydrag .selectable>li").eq(selected_li_arr[i]).addClass("delete_flag")
       $( ".drag_info_box").before(_group_li_);
      }
     }
     $("#mydrag .selectable>li.delete_flag").remove();
     $(".drag_info_box").remove();
     $(this).sortable();
    }
   }).disableSelection();
  });
 </script>
</head>
<body>
 <div id="mydrag" style="width:1200px;height: auto;">
  <div class="col-sm-4" style="background: #eeeeee">
   <ol class="selectable">
    <li class="ui-widget-content">النقطة 1</li>
    <li class="ui-widget-content">النقطة 2</li>
    <li class="ui-widget-content">النقطة 3</li>
    <li class="ui-widget-content">النقطة 4</li>
    <li class="ui-widget-content">النقطة 5</li>
    <li class="ui-widget-content">النقطة 6</li>
    <li class="ui-widget-content">النقطة 7</li>
   </ol>
  </div>
  <div class="col-sm-4" style="background: greenyellow">
   <div class="sample-groups">
    <div class="sample-group" style="min-height: 80px;">
     <ol>
      <li class="ui-state-highlight">النقطة 1</li>
      <li class="ui-state-highlight">النقطة 2</li>
      <li class="ui-state-highlight">البند 3</li>
      <li class="ui-state-highlight">البند 4</li>
      <li class="ui-state-highlight">البند 5</li>
     </ol>
    </div>
   </div>
  </div>
  <div class="col-sm-4" style="background: green">
   <div class="row">
    <div style="background: #ffff00"></div>
    <div class="col-sm-5" style="background: blue"></div>
    <div class="col-sm-2" style="background: red"></div>
    <div class="col-sm-5" style="background: purple"></div>
   </div>
  </div>
 </div>
</body>
</html>

يمكن استخدام الكود (لم يتم كتابة تأثير الإطلاق المحدد، المثال هو منتج تجريبي حالي، سيتم تحويله إلى طريقة إضافة الملحق لاحقًا). سجلت أفكاري في الأيام الماضية. كانت البحث عن آلية الحدث، والتنظيم الذهني ومعالجة النزاعات تتطلب جهداً كبيراً، وأريد أن أتذكر ذلك.

هذا هو نهاية محتويات هذا المقال، آمل أن يكون مفيدًا لتعليمكم، وآمل أيضًا أن تدعموا وتدعوا دروس الصياغة.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، وتحمل حقوق الملكية لمالكها الأصلي، تم جمع المحتويات بواسطة المستخدمين عبر الإنترنت، ويحمل الموقع حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية. إذا رأيت محتوى يشتبه في أنه يخالف حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لإبلاغنا، وقدم الدليل على الأدلة، وسنقوم بإزالة المحتوى المزعوم عن حقوق النسخ فورًا.

تعليمية الأساس
سيكون لديك أيضًا