How to organize the possibility of dragging the blue box on the block-2 while pressing the left mouse button?

Page frame:

 .block-1 { width:100px; height:100px; background-color:red; float:left; } .block-2 { float:right; width:100px; height:100px; background-color:red; } .box { width:50px; height:50px; background-color:green; } 
 <div class="block-1"> <div class="box"></div> </div> <div class="block-2"></div>

    1 answer 1

    You can use Jquery http://api.jqueryui.com/draggable/#entry-examples

    It is possible so:

     function makeDroppable(e) { e.preventDefault(); } function dragBlock(e) { e.dataTransfer.setData("text/plain", e.target.id); } function dropBlock(e) { e.preventDefault(); //ΠŸΡ€ΠΈ ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ Ρ‚ΠΈΠΏ ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€ΠΈ ΠΈΡ… сохранСниС var rdata = e.dataTransfer.getData("text/plain"); //ΠžΡ‡ΠΈΡΡ‚ΠΈΠΌ содСрТимоС пСрСтаскиваСмого элСмСнта e.target.innerHTML = ""; //Π‘Π΄Π΅Π»Π°Π΅ΠΌ пСрСтаскиваСмый элСмСнт элСмСнтом ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠΌ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‰Π΅ΠΉ области Ρ‚.Π΅. фактичСски ΠΌΡ‹ //пСрСносим Π΅Π³ΠΎ Π² содСрТимоС ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‰Π΅Π³ΠΎ Π΅Π³ΠΎ элСмСнта e.target.appendChild(document.getElementById(rdata)) } 
     .block-1 { width: 100px; height: 100px; background-color: red; float: left; } .block-2 { float: right; width: 100px; height: 100px; background-color: red; } .box { width: 50px; height: 50px; background-color: green; } 
     <div class="block-1"> <div class="box" draggable="true" ondragstart="dragBlock(event)" id="draggable-element"></div> </div> <div class="block-2" ondrop="dropBlock(event)" ondragover="makeDroppable(event)"></div>

    [With the help of http://www.wisdomweb.ru/HTML5/draganddrop.php ]