Hello. Help, pliz. In general, there is an area on the village. It contains another smaller area. In the smaller one there is a block that has the Draggable property. I need to, as soon as I begin to pull a clone of this block, the area on which it was hiding, and the block did not interrupt movement and moved along the lowest area and was dropped there too. Thanks to everyone who will not pass by =)

    1 answer 1

    Here, I think so, we must cheat a little. If we hide the middle block at the beginning of the move, the item will also be hidden by the machine. Therefore, I propose to set transparency for some properties of the middle block and, if necessary, delete it at the end of the operation. See an example live (updated)

    HTML

    <div id="draggable_area"> <div id="big_block"> <div id="middle_block"> <div class="draggable">Тащи меня!</div> </div> </div> </div>

    CSS

     #draggable_area { display: inline-block; } #big_block { width: 450px; height: 450px; border: 1px solid #900; } #middle_block { width: 250px; height: 250px; border: 1px solid #900; margin: 10px; padding: 10px; } .draggable { position: absolute; width: 100px; height: 100px; border: 2px solid #036; line-height: 100px; text-align: center; color: #000; }

    jQuery

     $('#big_block').droppable({ accept: ".draggable", drop: function(event, ui) { var cloneBlock = $(ui.draggable); var topPos = ui.position.top; // позиция сверху var leftPos = ui.position.left; // позиция слева // вставляем клон в большой блок с указанными координатами cloneBlock.css({ top: topPos, left: leftPos }).appendTo('#big_block'); cloneBlock.parent(':not(#big_block)').remove(); // удаляем, если надо, родителя } }); $('.draggable').draggable({ containment: '#draggable_area', helper: 'clone', start: function(event, ui){ // задаем родительскому элементу прозрачный фон, шрифт и рамку $(this).parent(':not(#big_block)').css({ backgroundColor: 'rgba(255,255,255,0)', borderColor: 'rgba(255,255,255,0)', color: 'rgba(255,255,255,0)' }); } });

    UPD !!! Corrected the code and updated the link in connection with the fact that in Chrome the code did not work.

    • But it doesn't work for me, or I'm not doing something right) Chrome (19.0.1084.52 m) - Alex Kapustin
    • one
      @shurik, yes, Chrome didn’t really eat ... a parasite is kind of)) Corrected, now works everywhere (checked in: Osle 7-9, Chrome 19.0.1084.52 m, Opera 11.64, Safari 5.1.7). - Deonis