您的位置:

详解draggable的用法

一、drawing的用法

在介绍jquery中的draggable用法之前,我们先了解一下在HTML5中提供的draggable属性。使用这个属性可以让元素变得可拖拽,但是要注意的是,仅仅加上这个属性,元素并不会自动拖拽,还需要通过JavaScript来实现拖拽的效果。draggable属性有三个取值,分别为true(默认值)、false和auto。其中,当取值为auto时,元素只能在容器内进行拖拽,不能跨越容器边缘。

<div draggable="true">
    可拖拽的元素
</div>

二、jQuery中draggable的用法

jQuery UI是一个jQuery的扩展库,其中包含了draggable插件,可以方便地实现元素的拖拽效果。在使用之前,需要先引入jQuery库和jQuery UI库,代码如下:

<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入 jQuery UI 库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

然后,我们就可以使用draggable插件来实现元素的拖拽效果,代码如下:

$(function() {
    $("#element").draggable();
});

其中,$("#element")表示要被拖拽的元素的选择器,draggable()是draggable插件提供的方法。

此外,我们还可以通过配置参数来控制拖拽的效果,代码如下:

$(function() {
    $("#element").draggable({
        containment: "parent", // 限制拖拽范围为父元素
        cursor: "move" // 鼠标指针样式为move
    });
});

其它可以配置的参数还包括方向、拖拽开始和结束的回调函数等。

三、drag的用法

在jQuery UI中,除了draggable插件,还有一个可拖拽的插件叫做drag。它们两个的主要区别在于,draggable是用来实现元素拖拽的,而drag则是用来实现数据的拖拽。当你需要在不同的元素之间拖拽数据时,可以使用drag插件。

要实现数据拖拽,我们需要先设置数据源(也就是要被拖拽的数据),并添加一个可拖拽的handle元素。代码如下:

$(function() {
    $.widget("custom.draggable", $.ui.mouse, {
        
        _create: function() {
            this.element.addClass("custom-draggable-container");
            this.handle = $("
  
").addClass("handle"); this.element.append(this.handle); this._on(this.handle, { mousedown: "_start" }); }, _start: function(event) { var self = this; this._mouseDownEvent = event; var options = { helper: "clone", // 使用clone模式 appendTo: "body", // 拖拽时将helper元素插入到body中 revert: false // 拖拽结束后不回到原位置 }; var draggableData = { data: this.element.data(), start: this._mouseDownEvent }; $.extend(options, draggableData); this.helper = $("
") .addClass("custom-draggable-helper") .appendTo(options.appendTo) .css({ left: event.pageX, top: event.pageY }); this._addClass(this.helper, null, "ui-draggable-helper"); this._trigger("start", event); var that = this; $.when(this._mouseCapture(event)) .done(function() { that._mouseDrag(event, true); }) .fail(function() { event.stopPropagation(); that._trigger("cancel", event); }); }, _mouseDrag: function(event, noPropagation) { if (this.helper && event.which) { this.helper .css({ left: event.pageX, top: event.pageY }); this._trigger("drag", event); } return false; }, _stop: function(event) { if (this.helper) { this.helper.remove(); this.helper = null; } this._trigger("stop", event); if (!this.options.revert) { return false; } var that = this, element = this.element, $target = $(event.target), validDrop = false; if ($target.droppable("instance")) { // 如果鼠标所在的位置在droppable元素里,那么就触发drop事件。 $target.droppable("instance")._drop(that.event); validDrop = true; } if (!validDrop) { element.animate(that.originalPosition); } return !event.cancelBubble; } }); $(".custom-draggable-container").draggable(); });

上面的代码实现的是可拖拽数据的基本功能,并且使用了clone模式,使得拖拽过程中的元素为拖拽元素的一个副本,拖拽结束后拖拽元素不会回到原位。在使用的时候只需将可拖拽的元素加上custom-draggable-container这个class即可。

四、draggable属性

除了draggable插件和drag插件,jQuery UI还提供了一些与draggable相关的属性。下面我们同样通过代码来了解这些属性的用法。

1. axis属性

axis属性可以控制元素的拖拽方向,可以取值为"x"、"y"或空。如果取值为"x",元素只能沿水平方向拖拽;如果取值为"y",元素只能沿垂直方向拖拽;如果不设置,元素能够沿任意方向拖拽。

$(function() {
    $("#element").draggable({
        axis: "x"
    });
});

2. containment属性

containment属性可以控制元素的拖拽范围。可以取值为parent、document、window或一个选择器的字符串。分别表示元素只能在其父元素内进行拖拽、只能在文档内进行拖拽、只能在浏览器窗口内进行拖拽,以及只能在某个选择器所表示的元素内进行拖拽。

$(function() {
    $("#element").draggable({
        containment: "document"
    });
});

3. handle属性

handle属性可以指定元素的某个子元素作为拖拽的触发元素,这个子元素被称作“handle”。只有在handle部分按下鼠标才能拖拽整个元素。

$(function() {
    $("#element").draggable({
        handle: ".handle"
    });
});

五、draggable用法示例

下面,我们来看一个实际的使用案例。这是一个拖拽图片的效果,图片可以被拖拽到放置区域。代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>draggable用法示例</title>
    <meta charset="utf-8">
    <style>
        .img-container { 
            margin: 20px; 
            width: 500px;
            height: 400px;
            border: 2px dashed gray; 
            position: relative;
            cursor: pointer; 
        }
        .img-placeholder {
            width: 500px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .img-placeholder img {
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $("#img").draggable({
                helper: "clone",
                revert: "invalid"
            });

            $(".img-placeholder").droppable({
                accept: "#img",
                drop: function(event, ui) {
                    var $img = $(ui.helper).clone();
                    $img.css({
                        position: "absolute",
                        top: ui.offset.top - $(this).offset().top,
                        left: ui.offset.left - $(this).offset().left,
                        opacity: 1
                    }).appendTo(this);
                }
            });
        });
    </script>
</head>
<body>
    <div class="img-container">
        <div class="img-placeholder"></div>
        <img id="img" src="https://cdn.jsdelivr.net/gh/jquery/jquery-ui@1.12.1/themes/smoothness/images/ui-icons_222222_256x240.png">
    </div>
</body>
</html>

当用户在图片上按下鼠标时,会出现一个副本跟随鼠标移动,当鼠标移动到放置区域并释放鼠标时,副本会在放置区域出现一张新的图片。

六、总结

本文介绍了draggable的用法,包括HTML5中的draggable属性、jQuery UI中的draggable插件、drag插件以及与draggable相关的一些属性。同时,我们还通过一个实际的案例,展示了draggable的具体应用场景。通过学习本文,相信读者对draggable的掌握已经足够熟练了。