مثال على تحقيق خاصية سحب وإفلات باستخدام Vue

سأشارككم اليوم كود خاصية سحب وتحريك لوحة المفاتيح المخصصة لـ vue، والكود كما يلي:

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>الطرق المثبتة</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <script src="../js/vue1.0.js"></script>
 <script src="../js/vue-resource.js"></script>
 <script>
  //تعريف الأوامر المخصصة
  Vue.directive('drag',function(){
   var oDiv = this.el;
   oDiv.onmousedown = function(ev){
    var disX = ev.clientX -oDiv.offsetLeft;
    var disY = ev.clientY - oDiv.offsetTop;
    document.onmousemove = function(ev){
     var l = ev.clientX-disX;
     var t = ev.clientY-disY;
     oDiv.style.left = l+'px';
     oDiv.style.top = t+'px';
    };
    document.onmouseup = function(){
     document.onmousemove=null;
     document.onmouseup=null;
    };
   };
  });
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{}
   });
  }
 </script>
</head>
<body>
<div id="box">
 <div v-drag :style="{width:'100px', height:'100px', background:'aqua', position:'absolute', right:0, top:0}">
 </div>
</div>
</body>
</html>

دعونا نرى معلومات لوحة المفاتيح المخصصة لـ Vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>اللوحة المفاتيح المخصصة</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/vue1.0.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    Vue.directive('on').keyCodes.ctrl=17;
    Vue.directive('on').keyCodes.myenter=13;
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{},
        methods:{
          show:function(){
            alert(111);
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keydown.ctrl="show">
  <hr>
  <input type="text" @keydown.myenter="show | debounce 2000">
</div>
</body>
</html>

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

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

أساسيات التعليمات

سيحبك