jquery+简单的上下拖拽

jQuery是一种流行的JavaScript库，它可以帮助我们更轻松地操作HTML元素和处理DOM事件。一个非常常见的功能是拖拽。在这篇文章中，我们将介绍如何使用jQuery实现简单的上下拖拽。

//HTML代码div class="draggable">
    第一个可拖拽的元素/div>
    div class="draggable">
    第二个可拖拽的元素/div>
    div id="droppable">
    /div>
//CSS代码.draggable {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    margin-bottom: 10px;
    cursor: move;
}
#droppable {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
//JavaScript代码$(document).ready(function(){
//使元素可拖拽$(".draggable").draggable({
helper:"clone" //拖拽时复制元素}
    );
//使元素可以被放置$("#droppable").droppable({
drop:function(event, ui){
    //将拖拽的元素放置到#droppable中$(this).append(ui.draggable.clone());
}
}
    );
}
    );
    

首先，在HTML代码中我们有两个class为“draggable”的元素，它们将是我们可拖拽的元素。还有一个id为“droppable”的元素，它将是我们的目标元素，可以被拖拽元素放置。

在CSS中，我们为可拖拽元素(.draggable)和目标元素(#droppable)分别设置了样式。

在脚本中，我们使用了jQuery UI的draggable和droppable方法来实现拖拽。在$(document).ready()函数中，我们通过draggable()方法将class为“draggable”的元素设为可拖拽，并设置helper选项为“clone”，这样当我们拖拽元素时，会复制一个新的元素在原位置。

另外，我们使用了droppable()方法将id为“droppable”的元素设为可被放置元素。在drop事件中，我们使用了ui.draggable.clone()来复制拖拽的元素到目标元素中。这样，就可以简单的实现一个上下拖拽的功能了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！