Thiết kế website giá rẻ

Question

Cannot re-enable droppable after disabling it

I want to make draggable divs which can be dragged into empty parent divs. Each parent can only accept one draggable. To do this, I disable the droppable after the draggable has been dropped. However, when I move the draggable from the droppable, trying to re-enable it crashes my script.

In the code below, I should be able to drag the grey boxes into a green box. When dragging, the previous box should turn green and then accept another grey box.

The code below has the offending command commented out.

<code>$(document).ready(function () {

$(".draggable").draggable({

start: function(event, ui){

// Line below causes a script error

// $(this).parent().droppable('enable');

},

revert: "invalid",

helper: "original",

zIndex: 100

});

$(".accept").droppable({

accept: ".draggable",

drop: function (event, ui) {

$(this).append(ui.helper);

$(this).droppable('disable');

ui.draggable.position({

of: $(this),

my: 'left+1 top+1',

at: 'left top'

});

}

});

});</code>

<code>$(document).ready(function () { $(".draggable").draggable({ start: function(event, ui){ // Line below causes a script error // $(this).parent().droppable('enable'); }, revert: "invalid", helper: "original", zIndex: 100 }); $(".accept").droppable({ accept: ".draggable", drop: function (event, ui) { $(this).append(ui.helper); $(this).droppable('disable'); ui.draggable.position({ of: $(this), my: 'left+1 top+1', at: 'left top' }); } }); });</code>

$(document).ready(function () {
        $(".draggable").draggable({
        start: function(event, ui){
        // Line below causes a script error
        //    $(this).parent().droppable('enable');
        },
            revert: "invalid",
            helper: "original",
            zIndex: 100
        });  

        $(".accept").droppable({
            accept: ".draggable",
            drop: function (event, ui) {
                $(this).append(ui.helper);
                $(this).droppable('disable');
                ui.draggable.position({
                of: $(this),
                my: 'left+1 top+1',
                at: 'left top'
            });
            }
        });
    });

<code>body {

height: 100vh;

margin: 0;

}

.box {

width: 100px;

height: 100px;

border: 1px solid #ccc;

margin-right: 10px;

overflow: hidden;

float: left;

background-color: #0f0;

}

.ui-droppable-disabled {

background-color: #f00;

}

.draggable {

width: 98px;

height: 88px;

cursor: move;

border: 1px solid #999;

margin-bottom: 10px;

background-color: #f0f0f0;

float: left;

}</code>

<code>body { height: 100vh; margin: 0; } .box { width: 100px; height: 100px; border: 1px solid #ccc; margin-right: 10px; overflow: hidden; float: left; background-color: #0f0; } .ui-droppable-disabled { background-color: #f00; } .draggable { width: 98px; height: 88px; cursor: move; border: 1px solid #999; margin-bottom: 10px; background-color: #f0f0f0; float: left; }</code>

body {
    height: 100vh;
    margin: 0;
}
.box {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    margin-right: 10px;
    overflow: hidden;
    float: left;
    background-color: #0f0;
}
.ui-droppable-disabled {
    background-color: #f00;
}
.draggable {
    width: 98px;
    height: 88px;
    cursor: move;
    border: 1px solid #999;
    margin-bottom: 10px;
    background-color: #f0f0f0;
    float: left;
}

<head>

</head>

<body>

</div>

</div>

</div>

</div></code>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> 
<script   src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"   integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c="   crossorigin="anonymous"></script> 
<script src="../js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div class="box ui-droppable-disabled" id="box1">
    <div class="draggable ui-widget-content" id="dragObject1">
        <p>Drag me 1!</p>
    </div>
</div>
<div class="box ui-droppable-disabled" id="box2">
    <div class="draggable ui-widget-content" id="dragObject2">
        <p>Drag me 2!</p>
    </div>
</div>
<div class="box accept" id="box3"> </div>
<div class="box accept" id="box4"></div>
<div class="box accept" id="box5"></div>
<div class="box ui-droppable-disabled" id="box6">
    <div class="draggable ui-widget-content" id="dragObject3">
        <p>Drag me 3!</p>
    </div>
</div>

How can I re-enable droppable on the parent div when moving the draggable from it?

Also, on a side note, how can I get the draggable to appear over the droppable rather than inside them?

Danh mục