html 拖拽修改控件大小,jquery实现div边界拖拽控制大小.html

body,

html {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

#container {

width: 100%;

height: 100%;

/* Disable selection so it doesn't get annoying */

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: moz-none;

-ms-user-select: none;

user-select: none;

}

#container #left {

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 100px;

background: red;

}

#container #right {

position: absolute;

right: 0;

top: 0;

bottom: 0;

width: 200px;

background: blue;

}

#container #handle {

position: absolute;

left: -4px;

top: 0;

bottom: 0;

width: 8px;

cursor: w-resize;

}

This is the left side's content!

var isResizing = false,

lastDownX = 0;

$(function() {

var container = $('#container'),

left = $('#left'),

right = $('#right'),

handle = $('#handle');

handle.on('mousedown', function(e) {

isResizing = true;

lastDownX = e.clientX;

});

$(document).on('mousemove', function(e) {

// we don't want to do anything if we aren't resizing.

if (!isResizing)

return;

var offsetRight = container.width() - (e.clientX - container.offset().left);

left.css('right', offsetRight);

right.css('width', offsetRight);

}).on('mouseup', function(e) {

// stop resizing

isResizing = false;

});

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史