Search code examples
jqueryjquery-uijquery-ui-draggablejquery-ui-droppable

How to remove draggable div with droppable div

I have a table in which there is a div with class drag which this element can drag and drop class which this element will receive a drag element, my problem is I want to change the origin palce of the drag element by element drop. The following is my code:

<html>
<head>
<style>
.drag{
    height: 30px;
    width: 30px;
    background-color: red;
    margin: auto;
}
.drop{
    height: 35px;
    width: 35px;
    background-color: green;
}
</style>

<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.css">

</head>
<body>
    <table>
        <tr>
            <td><div class="drop"></div></td>
            <td><div class="drop"></div></td>
            <td><div class="drop"></div></td>
            <td><div class="drop"></div></td>
        </tr>
        <tr>
            <td><div class="drop"></div></td>
            <td><div class="drop"></div></td>
            <td><div class="drop"></div></td>
            <td><div class="drag"></div></td>
        </tr>
        <tr>
            <td><div class="drop"></div></td>
            <td><div class="drag"></div></td>
            <td><div class="drop"></div></td>
            <td><div class="drag"></div></td>
        </tr>
    </table>

</body>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script>
$(document).ready(function(){
    $('.drag').draggable({ 
        contaiment:'document',
        axis: 'y'
    });

    $('.drop').droppable({
        accept: '.drag',
        drop:function(event, ui){
            //alert(ui.draggable.attr('class'));
            $(this).remove();
        }
    });
});
</script>
</html>
Solution 
  • As I understand, you should try this by removing the line **axis:'y'**.




 $(document).ready(function () {
    $('.drag').draggable({
        contaiment: 'document'
        //,axis: 'y'// comment this line
    });

    $('.drop').droppable({
        accept: '.drag',
        drop: function (event, ui) {

            $(this).remove();
        }
    });
});

Let me know if you need any other help.