jquery draggable元素符合droppable元素的确切大小

Question

如何使可拖动项目符合droppable项目，当我拖动img1时，它应该适合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>

Answer 1

一般来说，您将丢弃的项目更改为droppable的drop()回调的一部分。

// set up your draggable items
$("#droppable > span").draggable();

// set up droppable regions and methods
$("#draggable").droppable({
    accept: "#droppable > span",
    drop: function (event, ui) {
        // do something with dropped item (ui.draggable)
        // this = region into which it was dropped
        ui.draggable.css({ maxWidth: $(this).width() });
    }
});

jQuery UI网站上的Droppable页面包含an example of this。