Bir div'i diğerine sürükleyip bırakın

-1

Bir div'u div'dan diğerine kolayca taşımaya çalışıyorum. bana yardım edebilir, böyleceBir div'i diğerine sürükleyip bırakın

Burada kod

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style type="text/css"> 
 
     #myDIV { 
 
     border: 1px solid black; 
 
     margin-bottom: 10px; 
 
     width: 500px; 
 
     height: 300px; 
 
     box-sizing: border-box; 
 
     border: solid #000 2px; 
 
     background-color: #d12; 
 
     } 
 

 
     .ZE { 
 
     position: fixed; 
 
     width: 400px; 
 
     height: 100px; 
 
     background-color: #73AD81; 
 
     overflow: hidden; 
 
     border-radius: 20px 60px; 
 
     border: 2px solid #965D31; 
 
     } 
 

 
     .ZE.left { 
 
     top: 50%; 
 
     transform: translateY(-50%); 
 
     } 
 

 
     .ZE.right { 
 
     right: 0; 
 
     top: 50%; 
 
     transform: translateY(-50%); 
 
     } 
 

 
     .ZE.up { 
 
     left: 50%; 
 
     transform: translateX(-50%); 
 
     } 
 

 
     .ZE.down { 
 
     left: 50%; 
 
     transform: translateX(-50%); 
 
     bottom: 0; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="parent-div"> 
 
     <div class="myDIV" id="myDIV"></div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     var parent = document.getElementById("parent-div"); 
 

 
     // for demo purposes 
 
     var data = { 
 
     isConnected: true 
 
     }, 
 
      classes = ['left', 'right', 'up', 'down']; 
 

 
     //socket.on("isConnected", function(data) { 
 
     // Receive the 'data' and check if 'isConnected' is true 
 

 
     // loop for demo purposes 
 
     for (var i = 0; i < 4; i++) { 
 

 
     if (data.isConnected === true) { 
 
      parent.innerHTML += "<div class='ZE " + classes[i] + "'></div>" 
 
     } 
 

 
     } 
 
     //}); 
 
    </script> 
 
    </body> 
 
</html>

Ben oluşturulan diğer divlere içine #myDIV div taşımak istediğiniz

burada, stil ve html var. ZE leftZE right ... vb. Kolay olduğunu düşünüyorum, ama bu konuda yeniyim, bu yüzden biraz yardıma ihtiyacım var.

kaynak

2016-04-12 Moez Ben Ahmed

diğer yeni oluşturulan div içine senin '# myDIV' klonlamak mı demek istiyorsun doğru yolda yo yardımcı olur, böylece

<head> <!--JQuery Lirary for adding answer steps--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head>

Hope gibi bölümündeki JQuery kütüphanesi başvuru eklenmesi gerekmektedir? –

sadece sürükle ve bırak oraya bırakın –

[jquery-ui droppable] (https://jqueryui.com/droppable/) gibi eklentiyi kullanmanın yolu nedir? –

Bu gönderi, benzer bir şey soruyor. (Soruyu sordum). Yorumlar bölümünde bulunan JSFiddle koduna ve cevaba bakarsanız, bunu nasıl yapacağınızı bilmeniz gerekir. İhtiyaçlarıma göre özelleştirmek için birkaç saatimi aldı ama ben oraya gidiyorum. Bu yüzden sabırlı olun ve bu kodla çalışmaya devam edin. Sen

kaynak

2016-05-22 02:55:22 KPM

Bir div'i diğerine sürükleyip bırakın

cevap

İlgili konular