html - jquery draggable element fit within the exact size of droppable element -
html - jquery draggable element fit within the exact size of droppable element -
how can create draggable item fit within droppable item, when drag img1 should fit within preg1
<div id="droppable"> <span id="img1"> <img src="img/img1.png" class="respues" alt="img1"/></span> <span id="img2"> <img src="img/img2.png" class="respues" alt="img2"/></span> </div> <div id="draggable"> <article class="preg1"> </article> <article class="prega"> </article> </div>
generally speaking, alter dropped item part of droppable's drop()
callback.
// set draggable items $("#droppable > span").draggable(); // set droppable regions , methods $("#draggable").droppable({ accept: "#droppable > span", drop: function (event, ui) { // dropped item (ui.draggable) // = part dropped ui.draggable.css({ maxwidth: $(this).width() }); } });
the droppable page on jquery ui website includes an illustration of this.
jquery html
Comments
Post a Comment