عابر سبيل2 نشر 31 يوليو 2022 أرسل تقرير نشر 31 يوليو 2022 السلام عليكم ورحمه الله وبركاته احتاج الى المساعدة بموضوع السحب والافلات في صفحات الويب قمت بكتابة برنامج على محرر على الهاتف والمشكلة أن خاصية السحب والافلات لا تعمل قمت بتجربة كل الطرق لكن العنصر لايتحرك هو عبارة عن div يحتوي على نص ارجو المساعدة 1 اقتباس
0 عمر قره محمد نشر 31 يوليو 2022 أرسل تقرير نشر 31 يوليو 2022 هل يمكنك مشاركة ملفاة المشروع بالكامل، حتى نستطيع الاطلاع عليه، لا يبدو هنالك خطأ في الصورة التي شاركتها. 1 اقتباس
1 Adnane Kadri نشر 31 يوليو 2022 أرسل تقرير نشر 31 يوليو 2022 لا يوجد مشكلة بالشيفرة التي لديك، يحتمل ان يكون هنالك مشكلة باستهداف حدث السحب. بجانب ان اغلب الهواتف لا تستمع لحدث السحب والافلات drag and drop . بدل هذا يوجد لديها الاحداث touch المتفرع عنها: touchstart بدل dragstart touchend بدل dragend touchmove بدل dragover touchleave بدل dragleave touchcancel بدل drop جرب اختبار تشغيل الاحداث drag على حاسب اولا. ثم هاته الاحداث touch في الهاتف لديك. تأكد فقط من اثارة حدث السحب على نحو صحيح. ففي حالة النص مثلا، تأكد من تحديد كامل النص ثم اسحبه. فهم الأحداث في جافاسكربت 1 اقتباس
0 عابر سبيل2 نشر 31 يوليو 2022 الكاتب أرسل تقرير نشر 31 يوليو 2022 <!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> بتاريخ 1 ساعة قال عمر قره محمد: هل يمكنك مشاركة ملفاة المشروع بالكامل، حتى نستطيع الاطلاع عليه، لا يبدو هنالك خطأ في الصورة التي شاركتها. اولا شكرا جزيلا اخي الكريم وجزاك الله كل خير قمت بإضافة الكود كامل اقتباس
السؤال
عابر سبيل2
السلام عليكم ورحمه الله وبركاته
احتاج الى المساعدة بموضوع السحب والافلات في صفحات الويب
قمت بكتابة برنامج على محرر على الهاتف والمشكلة أن خاصية السحب والافلات لا تعمل قمت بتجربة كل الطرق لكن العنصر لايتحرك
هو عبارة عن div يحتوي على نص
ارجو المساعدة
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.