Jquery 如何使用可下拉div删除可拖动div_Jquery_Jquery Ui_Jquery Ui Draggable_Jquery Ui Droppable

Jquery 如何使用可下拉div删除可拖动div

jquery jquery-ui

Jquery 如何使用可下拉div删除可拖动div,jquery,jquery-ui,jquery-ui-draggable,jquery-ui-droppable,Jquery,Jquery Ui,Jquery Ui Draggable,Jquery Ui Droppable,我有一个表，其中有一个div，该div具有类drag，该元素可以拖放该类，该类元素将接收一个drag元素，我的问题是我想逐个元素拖放更改drag元素的起始位置。以下是我的代码： <html> <head> <style> .drag{ height: 30px; width: 30px; background-color: red; margin: auto; } .drop{ height: 35px; wid

我有一个表，其中有一个div，该div具有类drag，该元素可以拖放该类，该类元素将接收一个drag元素，我的问题是我想逐个元素拖放更改drag元素的起始位置。以下是我的代码：

<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>


.拖{
高度：30px；
宽度：30px；
背景色：红色；
保证金：自动；
}
.放下{
高度：35px；
宽度：35px；
背景颜色：绿色；
}
$（文档）.ready（函数（）{
$（'.drag'）.draggable（{
内容：'文件'，
轴：“y”
});
$（'.drop'）。可拖放({
接受：'.drag'，
drop：函数（事件、用户界面）{
//警报（ui.draggable.attr（'class'））；
$（this.remove（）；
}
});
});

thak是有原因的，但我的问题是用drop类替换div，这样我就可以将它放回原点，这非常有用，还有一个问题：D如何将被拖动元素的原点更改为可拖放？

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.