Drag div to another div and resize when dropping!

Question

Drag div to another div and resize when dropping!

Navigation

#1 by (1 votes)

1

Good evening, guys! basically what I'm trying to do is to drag a div (#mainmsg) into another div (#msgprivhere), but I need to resize it when I drop it. I just wonder if this is possible. I'm starting in the area of web development, and I'm very lay. Thank you very much in advance! I have no preference for language. If there is a possibility, I would like to try. Thanks to whoever can answer!

                <div id="scroll" >
                    <div id="hidden">
                        <div class="rcvmsg" id="mainchat">
                            <div class="mainmsg">
                                <span class="nickname"> Oliver Motokh </span>
                                <span style="float:right"> 12:34 pm </span>
                                <span> heeooooyuuuo</span>
                            </div>
                        </div>
                    </div>
                    <div id="msgprivhere">
                        <div class="privmss">
                            <div id="rcvprivuser">
                                <div id="privuser">
                                    <span class="nicknamepriv">Oliver Motokh </span>
                                    <span style="float:right"> 12:34 pm </span>
                                    <span> heeeeyyyyyyooooooooooooy</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

div resize

asked by anonymous 06.07.2016 / 04:28

1 answer

Hide object with JavaScript Icon gets small in notification

score 1 · Accepted Answer

Hello. You can use the onDrop function of Javascript:

 <div ondrop="Funcao(evento)"></div>

In the function you resize using jQuery, manipulating the div's css. Home I hope I have helped.

** Update As requested, I am putting a more complete example of how to do this, using jQuery:

No HTML:

<div id="movimento" ondrop="mover()"></div>

In JavaScript:

function mover() {
   $("#movimento").css({"width":"500px","height":"400px"});
}