jquery拖拽特效 源码下载

jQuery拖拽特效是利用jQuery库中的draggable()和droppable()方法实现的。draggable()方法用于使元素可以被拖拽，而droppable()方法用于定义元素可放置的目标区域。

要实现拖拽特效，首先需要在HTML中包含jQuery库的引用，然后编写相应的代码。

以下是一个简单的示例：
1. HTML代码：

<div id="draggable">可拖拽的元素</div>
<div id="droppable">可放置的目标区域</div>

2. JavaScript代码：

$(document).ready(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this).addClass("dropped");
      $(ui.draggable).addClass("dragged");
      $(ui.draggable).detach().appendTo(this);
    }
  });
});

在上面的代码中，我们首先使用draggable()方法将id为"draggable"的元素设置为可拖拽的。接着使用droppable()方法将id为"droppable"的元素设置为可放置元素的目标区域。

在droppable()方法的参数中，我们定义了一个drop事件处理函数。当拖拽元素被放置到目标区域时，这个函数将被调用。在这个函数中，我们给目标区域添加了一个名为"dropped"的类，给拖拽元素添加了一个名为"dragged"的类并将拖拽元素移动到目标区域内。

最后，在CSS中定义类".dropped"和".dragged"的样式，以实现特定的外观效果。

完成以上步骤后，保存并加载页面，你将能够在页面上看到一个可拖拽的元素和一个可放置的目标区域。当你拖拽元素到目标区域时，目标区域会改变外观，并将拖拽元素放置在内部。