اذهب إلى المحتوى
  • 0

مشكلة في أحداث السحب والافلات في الهاتف

عابر سبيل2

السؤال

السلام عليكم ورحمه الله وبركاته

احتاج الى المساعدة بموضوع السحب والافلات في صفحات الويب 

قمت بكتابة برنامج على محرر على الهاتف والمشكلة أن خاصية السحب والافلات لا تعمل قمت بتجربة كل الطرق لكن العنصر لايتحرك 

هو عبارة عن div يحتوي على نص 

ارجو المساعدة 

Screenshot_2022-07-31-16-31-41-327_com.paprbit.dcoder.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

لا يوجد مشكلة بالشيفرة التي لديك، يحتمل ان يكون هنالك مشكلة باستهداف حدث السحب. 

بجانب ان اغلب الهواتف لا تستمع لحدث السحب والافلات drag and drop . بدل هذا يوجد لديها الاحداث touch المتفرع عنها:

  • touchstart بدل dragstart 
  • touchend بدل dragend

  • touchmove بدل dragover

  • touchleave بدل dragleave

  • touchcancel بدل drop 

جرب اختبار تشغيل الاحداث drag على حاسب اولا. ثم هاته الاحداث touch في الهاتف لديك. تأكد فقط من اثارة حدث السحب على نحو صحيح. ففي حالة النص مثلا، تأكد من تحديد كامل النص ثم اسحبه.

فهم الأحداث في جافاسكربت

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

<!doctype html>

<html> 

 <head> 

  <title>Hello, World!</title> 

  <style>

 *{

   margin:0;

   padding:0;

   font-family: sans-serif;

 }

  body{

    background :#928cff;

    display: flex;

    justify-content: center;

    align-items: center;

    height : 100vh;

    flex-direction: column;

    gap : 30px;

  }

  .input{

    background : #fff;

    padding: 10px;

    border-radius:10px;

    width:300px;

    height:120px;

    display: flex;

    flex-direction:column;

    gap:30px;

    justify-content:center;  

    align-items:center;

  }

  h2{

    font-size: 32px;

  }

  .date{

    display:flex;

    flex-direction:column;

    width: 80%;

    gap:4px;

  }

  .date input{

    outline:none;

    padding:4px;

    border: 1px solif #928cff;

    

  }

  .date button{

    background : #928cff;

    color : #fff;

    border : none;

    cursor : pointer;

    padding : 5px;

    

  }

  

    .list{

      display : flex;

      justify-content: space-around;

      width: 100%;

      align-items: flex-start;

    }  

  .box{

    background: #fff;

    padding:10px;

    border-radius:10px;

    width:200px;

  }

  .item{

    background: #928cff;

    padding : 10px;

    margin : 4px;

    cursir : move;

    color : #fff;

  }

  

 

  </style> 

 </head> 

 <body> 

  <div class="input"> 

   <h2>Add text</h2> 

   <div class="date"> 

    <input type="text" id="inp"> <button id="btn">Add</button> 

   </div> 

  </div> 

  <div class="list"> 

   <div class="box"> 

    <h2>box</h2> 

   </div> 

   <div class="box"> 

    <h2>box</h2> 

   </div> 

   <div class="box"> 

    <h2>box</h2> 

   </div> 

   <div class="box"> 

    <h2>box</h2> 

   </div> 

  </div> 

  <script>

    let inp =document.getElementById('inp');

    let btn = document.getElementById('btn');

    let boxs =document.querySelectorAll('.box');

    

    btn.onclick = function(){

      if(inp.value != ''){

        boxs[0].innerHTML +=`

        <div class='item' draggable = 'true' >

          ${inp.value}  

        </div>

        `

        inp.value =null;

        

      }

      dragItem();

      

    }

    function dragItem(){

      let items = document.querySelectorAll('.item');

      items.forEach(item =>{

        item.addEventListener('tuochstart',function(){

          concole.log('drag is start');

        })

        

      })

    }  

    

 

  </script> 

 </body>

</html>

Screenshot_2022-07-31-16-31-41-327_com.paprbit.dcoder.thumb.jpg.c388502088824c8cf682e612329199b4.jpg

بتاريخ 1 ساعة قال عمر قره محمد:

هل يمكنك مشاركة ملفاة المشروع بالكامل، حتى نستطيع الاطلاع عليه،

لا يبدو هنالك خطأ في الصورة التي شاركتها.

 اولا شكرا جزيلا اخي الكريم وجزاك الله كل خير

قمت بإضافة الكود كامل

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...