تحقيق وظيفة سحب أفقي في قائمة التصفح باستخدام js

效果如下：

代码如下：

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>div横向拖拽排序</title>
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
 <style type="text/css">
  body, div {
   padding: 0px;
   margin: 0px;
  }
  .box {
   position: relative;
   margin-left: 15px;
   padding: 10px;
   padding-right: 0px;
   width: 810px;
   border: blue solid 1px;
  }
  .box ul{
   list-style: none;
   
   
   
  }
  
   تحرك: اليسار;
   
   
  }
  
   
   
  }
  
   
   
   
  }
  
   تحرك: اليسار;
   حافة: 1px منحرفة شفافة;
  }
 </style>
</head>
<body>
<h1>تنسيق السحب الأفقي</h1>
<div class="box">
 <ul>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >توجيه واحد</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >توجيه ثاني</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >توجيه توجيه توجيه ثلاثة</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >توجيه توجيه أربعة</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">مرجع خمس</a></li>
 </ul>
</div>
<script type="text/javascript">
 $.ready(function () {
  var range = {x: 0, y: 0};//المسافة النسبية للفأرة
  var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; //أربعة أرقام للعنصر المزحوم
  var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; //مؤشر العنصر الهدف التأسيس
  var theDiv = null, move = false;
  var choose = false; //حالة السحب للعنصر، حالة التحديد
  var theDivId = 0, theDivHeight = 0, theDivHalf = 0;
  var tarFirstY = 0; //مؤشر العنصر المزحوم، الارتفاع، التأسيس
  var tarDiv = null, tarFirst, tempDiv; //عنصر الهدف المراد إدراجه, العنصر الظاهري
  var initPos = {x: 0, y: 0};
  var theDivWidth;//عرض العنصر المزحوم
  $(".drag").each(function () {
   $.mousedown(function (event) {
    choose = true;
    //عنصر السحب
    theDiv = $(this);
    //تسجيل موقع العنصر المزحوم كأول موقع
    initPos.x = theDiv.position().left;
    initPos.y = theDiv.position().top;
    //المسافة النسبية للفأرة عن العنصر
    range.x = event.pageX - theDiv.position().left;
    range.y = event.pageY - theDiv.position().top;
    theDivId = theDiv.index();
    theDivWidth = theDiv.width();
    theDivHalf = theDivWidth / 2;
    theDiv.removeClass("drag");
    theDiv.addClass("drag-dash");
    theDiv.css({left: initPos.x + 'px', top: initPos.y + 'px'});
    // إنشاء عنصر جديد وإدراجه في مكان العنصر الدافع (الخط الفارغ)
    $("<div class='dash'></div>").insertBefore(theDiv);
    tempDiv = $(".dash");
    $(".dash").css("width" , theDivWidth);
    return false
   });
  });
  $(document).mouseup(function (event) {
   if (!choose) {
    return false;
   }
   if (!move) {
    // استعادة النمط الأصلي للعنصر
    theDiv.removeClass("drag-dash");
    theDiv.addClass("drag");
    tempDiv.remove(); // إزالة div الخط الفارغ المضاف حديثًا
    choose = false;
    return false;
   }
   theDiv.insertBefore(tempDiv); // إدراج العنصر الدافع في مكان div الخط الفارغ
   // استعادة النمط الأصلي للعنصر
   theDiv.removeClass("drag-dash");
   theDiv.addClass("drag");
   tempDiv.remove(); // إزالة div الخط الفارغ المضاف حديثًا
   move = false;
   choose = false;
   return false
  }).mousemove(function (event) {
   if (!choose) {return false}
   move = true;
   lastPos.x = event.pageX - range.x;
   lastPos.y = event.pageY - range.y;
   lastPos.x1 = lastPos.x + theDivWidth;
   // تحريك العنصر الدافع مع الفأرة
   theDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});
   // البحث عن العنصر الهدف للإدراج عند تحريك العنصر الدافع مع الفأرة
   var $main = $('.drag'); // متغير محلي: حصول على إحداثيات جميع العناصر مرة أخرى بناءً على الترتيب المعدل،
   $main.each(function () {
    tarDiv = $(this);
    tarPos.x = tarDiv.position().left;
    tarPos.y = tarDiv.position().top;
    tarPos.x1 = tarPos.x + tarDiv.width() / 2;
    tarFirst = $main.eq(0); // الحصول على العنصر الأول\
    tarFirstX = tarFirst.position().left + theDivHalf; // مركز العنصر الأول على المحور الأفقي
    //تحريك عنصر الترحيل إلى الموضع الأول
    if (lastPos.x <= tarFirstX) {
     tempDiv.insertBefore(tarFirst);
    }
    //تحديد موضع العنصر المستهدف للإدراج، ثم إدراجه مباشرة
    if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
     tempDiv.insertAfter(tarDiv);
    }
   });
   return false
  });
 });
</script>
</body>
</html>

هذا هو نهاية محتوى هذا المقال، نأمل أن تكون محتويات هذا المقال قد ساعدتكم في التعلم أو العمل، ونأمل أيضًا أن تحصلوا على الدعم الكافي لتعليمات نطقية!

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

دليل الأساسيات

توصيات لك