Drag and drop the JS implementation of the child form

1. The child form

When designing the website, we need to design some modal subforms, such as

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201402/2014225145100651.png" >

This step is very easy to achieve, just need div+ CSS ok, see the code:

    <div class="modal-background"></div>
    <div class="modal-window">
        <div class="head">
            <center> Clicking on the living area can change my position </center>
        </div>
    </div>

.modal-background
{
    background-color: #999999;
    bottom: 0;
    left: 0;
    opacity: 0.3;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
}
.modal-window
{
    background-color: #FFFFFF;
    border: 1px solid #6B94AD;
    box-shadow: 5px 5px 5px #6B94AD;
    font-family: 'Microsoft YaHei';
    font-size: 12px;
    height: 120px;
    left: 50%;
    margin-left: -160px;
    margin-top: -160px;
    opacity: 1;
    position: fixed;
    top: 50%;
    width: 320px;
    z-index: 1110;
}
    .modal-window .head
    {
        height: 25px;
        color: #fff;
        font-weight: 600;
        background-image: -moz-linear-gradient(top, #4A8CC5, #2963A5); 
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A8CC5), color-stop(1, #2963A5)); 
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0'); 
    }
        .modal-window .head center
        {
            padding-top: 2px;
        }

Add the above HTML and CSS and you can easily implement the above modal form effect. Left: 50%; Top: 50%; Margin - left: - 160 px; Margin - top: - 160 px; This is to center the modal form.

Of course, the size of the modal form is fixed and written in the style class. Modal-window. This does not mean that the size of the modal form cannot be modified.

    <div class="modal-background"></div>
    <div class="modal-window list-window">
        <div class="head">
            <center> Clicking on the living area can change my position </center>
        </div>
    </div>

In the second line of code, we append the.list-window style class to cover the size and position of the.modal-window class, but at the same time ensure that the modal form is centered

.list-window
{
    width:600px;
    height:400px;
    margin-left:-300px;
    margin-top:-200px;
}

As shown in figure

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201402/2014225145343350.png" >

As you can see, the implementation of this step is very simple, master a few key lines of CSS properties on the "end abuse" this modal subform, all kinds of other modal subform can be deduced.

2. How to drag and drop the child form when the mouse is over the head of the child form? When jQ was introduced, we only needed a few scripts to handle this small feature. Don't believe us

var left, top, $this;
$(document).delegate('.modal-window .head', 'mousedown', function (e) {
    left = e.clientX, top = e.clientY, $this = $(this).css('cursor', 'move');
    this.setCapture ? (
    this.setCapture(),
    this.onmousemove = function (ev) { mouseMove(ev || event); },
    this.onmouseup = mouseUp
    ) : $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
});
function mouseMove(e) {
    var target = $this.parents('.modal-window');
    var l = Math.max((e.clientX - left + Number(target.css('margin-left').replace(/px$/, '')) || 0), -target.position().left);
    var t = Math.max((e.clientY - top + Number(target.css('margin-top').replace(/px$/, '')) || 0), -target.position().top);
    l = Math.min(l, $(window).width() - target.width() - target.position().left);
    t = Math.min(t, $(window).height() - target.height() - target.position().top);
    left = e.clientX;
    top = e.clientY;
    target.css({ 'margin-left': l, 'margin-top': t });
}
function mouseUp(e) {
    var el = $this.css('cursor', 'default').get(0);
    el.releaseCapture ?
    (
        el.releaseCapture(),
        el.onmousemove = el.onmouseup = null
    ) : $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp);
}

This code is very short and should run smoothly in any browser.

In fact, its implementation principle is very simple, roughly divided into three steps:

When the mouse in the modal form head point (mousedown), immediately bound to the document mousemove and mouseup events

When the mouse is not up (no mouseup), if the mouse moves in the form, activate the mouseMove function, by calculating the distance of the mouse to move the position of the entire form in time.

When the mouse mouseup (mouseup), call the mouseup event, the document binding mousemove event and mouseup event unbound.

The principle of the whole process is that when the mouse is mousedown, the movement event of the mouse is transferred to the document, and the entire form is processed by the movement event of the mouse on the document.

In addition, there is a little trick in mouseMove, that is, the global left, top variable records the position when the mouse stopped last time, and then the next time the mouse position is compared with the left, top variable to determine how much distance the mouse has moved, so as to make the corresponding position move for the entire modal sub-form.

After the analysis of this code, it is found that the mouse movement of the form or even any element on the document is quite easy

For example, if we want to change the size of the form by dragging and dropping, we just need to adjust the size of the form in the mouseMove event handler function.

One might ask what do setCapture and releaseCapture do, respectively? Actually this is to be compatible with IE, only IE has these two functions, here despise IE. SetCapture allows the current element to capture all mouse events, and if you don't use them, you may not be compatible with Internet explorer.