jquery 上下拖动

jQuery是一个非常流行的JavaScript库，可以让前端开发变得更加简单和高效。其中，上下拖动是一项非常重要的功能之一，尤其在实现可拖动的列表、输入框等需要交互的界面中，非常实用。

$(document).ready(function() {
  // 首先，我们需要获取拖动的元素和放置的容器
  var $draggable = $('.draggable');
  var $droppable = $('.droppable');
  // 允许拖动元素
  $draggable.draggable({
    // 指定拖动的容器，这里是整个文档
    containment: 'document',
    // 拖动过程中，设置边界
    scroll: false,
    // 拖动结束时，触发事件
    stop: function() {
      // 判断是否被放置在容器中
      if ($draggable.offset().top > $droppable.offset().top &&
          $draggable.offset().top + $draggable.height() <
          $droppable.offset().top + $droppable.height()) {
        // 如果在容器内，则添加类名，并改变提示文本
        $droppable.addClass('hover');
        $droppable.text('放置元素成功！');
      } else {
        // 如果不在容器内，则移除类名，并改变提示文本
        $droppable.removeClass('hover');
        $droppable.text('请将元素拖至此处！');
      }
    }
  });
  // 允许元素放置在容器中
  $droppable.droppable({
    // 允许接受的类名
    accept: '.draggable',
    // 放置过程中，设置悬浮样式
    hoverClass: 'hover',
    // 放置结束时，触发事件
    drop: function() {
      // 修改提示文本为“放置元素成功”
      $(this).text('放置元素成功！');
    }
  });
});

在上面的代码中，我们使用了jQuery UI中的draggable和droppable组件来实现拖动和放置功能。拖动元素时，使用containment属性限制边界，并在stop事件中判断是否被放置在容器中。而放置元素时，则使用accept属性指定可接受的类名，hoverClass属性设置悬浮样式，drop事件修改提示文本。通过这些简单的设置，就可以方便地实现上下拖动功能。