1

要素（親）があり、ドラッグアンドドロップできます。その中に子要素があり、ドラッグして離すことはできませんが、親と一緒にドラッグされます。

また、子要素を折りたたむことができる領域もあります。

親をドラッグすると、ドラッグして子に応答できる領域を取得する必要があります。

JS:

$(document).ready(function() {
     $(".parent").draggable({});
     $(".drop-area").droppable({
         tolerance: touch
         , over: function(){
            $(".drop-area").css("background-color","#C00");
         }
         , deactivate:function(){
            $(".drop-area").css("background-color","#000");
         }              
     });
}

CSS:

.parent { position: relative; width: 200px; height: 200px; background: green; }
.child  { position: relative; width: 100px; height: 50px; background: red; right: 0; bottom: -50px;  }
.drop-area { position: absolute; width: 150px; height: 150px; bottom: 0; right: 0; background: bloack; }

HTML:

<body>
    <div class"parent">
        <div class="child"></div>
    </div>
    <div class="drop-area"></div>
</body>
4

0 に答える 0