introducción
No hace mucho tiempo, el jefe me asignó una tarea comparando colgando días fritos. Quiero lograr: en un marco de imagen con el ratón. Además, la pintura fuera de la caja, se puede lograr de cambio de tamaño, lo que significa que puede hacer zoom con el ratón, puede arrastrar y soltar. No voy a mencionar algunos de los detalles del negocio, además también se necesitan para poner en práctica interactiva, y este artículo sólo se habla del principio de arrastrar y soltar para lograr mi.
El marco de destino inicial
Debido a que la demanda también se requiere para dibujar más de una caja, los usuarios probablemente sacar una gran cantidad de cajas, si sólo es para detectar una ubicación evento del ratón una caja, pueden conducir fácilmente al desorden y arrastre la función de zoom, por lo tanto, el uso del pensamiento orientado a objetos , arrastre y enfocar la caja se convierte en un objetivo, se unen todos los demás eventos del ratón son sobre este tema.
Preámbulos, directamente en la fuente, la idea es muy simple.
function newBox(options) {
this.container = $('<div class="new_rect"></div>');
this.dragLeft = $('<div class="new_react-left"><div class="dots"></div></div>');
this.dragTop = $('<div class="new_react-top"><div class="dots"></div></div>');
this.dragRight = $('<div class="new_react-right"><div class="dots"></div></div>');
this.dragBottom = $('<div class="new_react-bottom"><div class="dots"></div></div>');
this.dragTopLeft = $('<div class="new_react-dots new_react-top-left"></div>');
this.dragTopRight = $('<div class="new_react-dots new_react-top-right"></div>');
this.dragBottomLeft = $('<div class="new_react-dots new_react-bottom-left"></div>');
this.dragBottomRight = $('<div class="new_react-dots new_react-bottom-right"></div>');
this.sureBtn = $('<div class="sureBtn"></div>');
this.cancelBtn = $('<div class="cancelBtn"></div>');
this.enableEdit = true;
this.init();
this.options = options;
}
newBox.prototype = {
init: function() {
this.container.append(this.dragLeft);
this.container.append(this.dragTop);
this.container.append(this.dragRight);
this.container.append(this.dragBottom);
this.container.append(this.dragTopLeft);
this.container.append(this.dragTopRight);
this.container.append(this.dragBottomLeft);
this.container.append(this.dragBottomRight);
this.container.append(this.sureBtn);
this.container.append(this.cancelBtn);
this.container.on({
'mousedown': this.containerMouseDown.bind(this),
'click': this.enableEditFunc.bind(this)
});
this.dragRight.on('mousedown', this.dragRightMouseDown.bind(this));
this.dragLeft.on('mousedown', this.dragLeftMouseDown.bind(this));
this.dragTop.on('mousedown', this.dragTopMouseDown.bind(this));
this.dragBottom.on('mousedown', this.dragBottomMouseDown.bind(this));
this.dragTopLeft.on('mousedown', this.dragTopLeftMouseDown.bind(this));
this.dragTopRight.on('mousedown', this.dragTopRightMouseDown.bind(this));
this.dragBottomRight.on('mousedown', this.dragBottomRightMouseDown.bind(this));
this.dragBottomLeft.on('mousedown', this.dragBottomLeftMouseDown.bind(this));
this.sureBtn.on('click', this.sureFunc.bind(this));
this.cancelBtn.on('click', this.cancelFunc.bind(this));
},
sureFunc: function() {
this.disableEditFunc();
if(this.options.sureFunc)
this.options.sureFunc(this.container);
return false;
},
cancelFunc: function() {
this.container.remove();
if(this.options.cancelFunc)
this.options.cancelFunc(this.container);
},
enableEditFunc: function() {
var sureBtn = this.sureBtn;
// 设置正在编辑的框的zindex为最大
this.container.css('z-index','100000000')
// 先保存未保存的
$('.new_rect .sureBtn').each(function() {
if($(this)[0] == sureBtn[0]){
return;
}
$(this).is(':visible') && $(this).click() && $(this).mouseleave();
})
this.enableEdit = true;
this.container.find('.new_react-dots, .dots').show();
this.sureBtn.show();
this.cancelBtn.show();
},
disableEditFunc: function() {
var width=this.container.width();
var height=this.container.height();
var area=parseInt(width*height);
this.container.css('z-index',100000000-area);
this.enableEdit = false;
this.container.find('.new_react-dots, .dots').hide();
this.sureBtn.hide();
this.cancelBtn.hide();
},
setPosition: function(position) {
this.container.css(position)
},
dragRightMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var rightElem = this.dragRight;
var o_x = ev.pageX;
var o_width = this.container.width();
var o_right = parseFloat(this.container.css('right'));
if(rightElem.setCapture) {
rightElem.setCapture();
}
$(document).on("mousemove.dragRight", doDragRight.bind(this));
$(document).on("mouseup.dragRight", stopDragRight.bind(this));
return false;
function doDragRight(e) {
var right = o_right - e.pageX + o_x;
if(right < 0)
right = 0;
if(right > o_width + o_right)
right = o_width + o_right
this.setPosition({
right: right
});
return false;
}
function stopDragRight(e) {
if(rightElem.releaseCapture) {
rightElem.releaseCapture();
}
$(document).off("mousemove.dragRight");
$(document).off("mouseup.dragRight");
return false;
}
},
dragLeftMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var leftElem = this.dragLeft;
var o_x = ev.pageX;
var o_width = this.container.width();
var o_left = parseFloat(this.container.css('left'));
if(leftElem.setCapture) {
leftElem.setCapture();
}
$(document).on("mousemove.dragLeft", doDragLeft.bind(this));
$(document).on("mouseup.dragLeft", stopDragLeft.bind(this));
return false;
function doDragLeft(e) {
var left = o_left + e.pageX - o_x;
if(left < 0)
left = 0;
if(left > o_width + o_left)
left = o_width + o_left
this.setPosition({
left: left
});
return false;
}
function stopDragLeft(e) {
if(leftElem.releaseCapture) {
leftElem.releaseCapture();
}
$(document).off("mousemove.dragLeft");
$(document).off("mouseup.dragLeft");
return false;
}
},
dragTopMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var topElem = this.dragTop;
var o_y = ev.pageY;
var o_height = this.container.height();
var o_top = parseFloat(this.container.css('top'));
if(topElem.setCapture) {
topElem.setCapture();
}
$(document).on("mousemove.dragTop", doDragTop.bind(this));
$(document).on("mouseup.dragTop", stopDragTop.bind(this));
return false;
function doDragTop(e) {
var top = o_top + e.pageY - o_y;
if(top < 0)
top = 0;
if(top > o_top + o_height)
top = o_top + o_height
this.setPosition({
top: top
});
return false;
}
function stopDragTop(e) {
if(topElem.releaseCapture) {
topElem.releaseCapture();
}
$(document).off("mousemove.dragTop");
$(document).off("mouseup.dragTop");
return false;
}
},
dragBottomMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var bottomElem = this.dragBottom;
var o_y = ev.pageY;
var o_height = this.container.height();
var o_bottom = parseFloat(this.container.css('bottom'));
if(bottomElem.setCapture) {
bottomElem.setCapture();
}
$(document).on("mousemove.dragBottom", doDragBottom.bind(this));
$(document).on("mouseup.dragBottom", stopDragBottom.bind(this));
return false;
function doDragBottom(e) {
var bottom = o_bottom - e.pageY + o_y;
if(bottom < 0)
bottom = 0;
if(bottom > o_bottom + o_height)
bottom = o_bottom + o_height
this.setPosition({
bottom: bottom
});
return false;
}
function stopDragBottom(e) {
if(bottomElem.releaseCapture) {
bottomElem.releaseCapture();
}
$(document).off("mousemove.dragBottom");
$(document).off("mouseup.dragBottom");
return false;
}
},
dragTopLeftMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var topLeftElem = this.dragTopLeft;
var o_y = ev.pageY;
var o_x = ev.pageX;
var o_height = this.container.height();
var o_width = this.container.width();
var o_top = parseFloat(this.container.css('top'));
var o_left = parseFloat(this.container.css('left'));
if(topLeftElem.setCapture) {
topLeftElem.setCapture();
}
$(document).on("mousemove.dragTopLeft", doDragTopLeft.bind(this));
$(document).on("mouseup.dragTopLeft", stopDragTopLeft.bind(this));
return false;
function doDragTopLeft(e) {
var top = o_top + e.pageY - o_y;
var left = o_left + e.pageX - o_x;
if(top < 0)
top = 0;
if(top > o_top + o_height)
top = o_top + o_height;
if(left < 0)
left = 0;
if(left > o_width + o_left)
left = o_width + o_left;
this.setPosition({
top: top,
left: left
});
return false;
}
function stopDragTopLeft(e) {
if(topLeftElem.releaseCapture) {
topLeftElem.releaseCapture();
}
$(document).off("mousemove.dragTopLeft");
$(document).off("mouseup.dragTopLeft");
return false;
}
},
dragTopRightMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var topRightElem = this.dragTopRight;
var o_y = ev.pageY;
var o_x = ev.pageX;
var o_height = this.container.height();
var o_width = this.container.width();
var o_top = parseFloat(this.container.css('top'));
var o_right = parseFloat(this.container.css('right'));
if(topRightElem.setCapture) {
topRightElem.setCapture();
}
$(document).on("mousemove.dragTopRight", doDragTopRight.bind(this));
$(document).on("mouseup.dragTopRight", stopDragTopRight.bind(this));
return false;
function doDragTopRight(e) {
var top = o_top + e.pageY - o_y;
var right = o_right - e.pageX + o_x;
if(top < 0)
top = 0;
if(top > o_top + o_height)
top = o_top + o_height;
if(right < 0)
right = 0;
if(right > o_width + o_right)
right = o_width + o_right;
this.setPosition({
top: top,
right: right
});
return false;
}
function stopDragTopRight(e) {
if(topRightElem.releaseCapture) {
topRightElem.releaseCapture();
}
$(document).off("mousemove.dragTopRight");
$(document).off("mouseup.dragTopRight");
return false;
}
},
dragBottomRightMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var bottomRightElem = this.dragBottomRight;
var o_y = ev.pageY;
var o_x = ev.pageX;
var o_height = this.container.height();
var o_width = this.container.width();
var o_bottom = parseFloat(this.container.css('bottom'));
var o_right = parseFloat(this.container.css('right'));
if(bottomRightElem.setCapture) {
bottomRightElem.setCapture();
}
$(document).on("mousemove.dragBottomRight", doDragTopRight.bind(this));
$(document).on("mouseup.dragBottomRight", stopDragTopRight.bind(this));
return false;
function doDragTopRight(e) {
var bottom = o_bottom - e.pageY + o_y;
var right = o_right - e.pageX + o_x;
if(bottom < 0)
bottom = 0;
if(bottom > o_bottom + o_height)
bottom = o_bottom + o_height;
if(right < 0)
right = 0;
if(right > o_width + o_right)
right = o_width + o_right;
this.setPosition({
bottom: bottom,
right: right
});
return false;
}
function stopDragTopRight(e) {
if(bottomRightElem.releaseCapture) {
bottomRightElem.releaseCapture();
}
$(document).off("mousemove.dragBottomRight");
$(document).off("mouseup.dragBottomRight");
return false;
}
},
dragBottomLeftMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var bottomLeftElem = this.dragBottomLeft;
var o_y = ev.pageY;
var o_x = ev.pageX;
var o_height = this.container.height();
var o_width = this.container.width();
var o_bottom = parseFloat(this.container.css('bottom'));
var o_left = parseFloat(this.container.css('left'));
if(bottomLeftElem.setCapture) {
bottomLeftElem.setCapture();
}
$(document).on("mousemove.dragBottomLeft", doDragTopLeft.bind(this));
$(document).on("mouseup.dragBottomLeft", stopDragTopLeft.bind(this));
return false;
function doDragTopLeft(e) {
var bottom = o_bottom - e.pageY + o_y;
var left = o_left + e.pageX - o_x;
if(bottom < 0)
bottom = 0;
if(bottom > o_bottom + o_height)
bottom = o_bottom + o_height;
if(left < 0)
left = 0;
if(left > o_width + o_left)
left = o_width + o_left;
this.setPosition({
bottom: bottom,
left: left
});
return false;
}
function stopDragTopLeft(e) {
if(bottomLeftElem.releaseCapture) {
bottomLeftElem.releaseCapture();
}
$(document).off("mousemove.dragBottomLeft");
$(document).off("mouseup.dragBottomLeft");
return false;
}
},
containerMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var o_x = ev.pageX;
var o_y = ev.pageY;
var containerWidth = this.container.width();
var containerHeight = this.container.height();
var o_top = parseFloat(this.container.css('top'));
var o_left = parseFloat(this.container.css('left'));
var o_right = parseFloat(this.container.css('right'));
var o_bottom = parseFloat(this.container.css('bottom'));
if(this.container.setCapture) {
this.container.setCapture();
}
$(document).on("mousemove.container", doDrag.bind(this));
$(document).on("mouseup.container", stopDrag.bind(this));
return false;
function doDrag(e) {
var disY = e.pageY - o_y;
var disX = e.pageX - o_x;
var top = o_top + disY;
var left = o_left + disX;
var right = o_right - disX;
var bottom = o_bottom - disY;
if(top < 0) {
top = 0;
bottom = o_bottom + o_top;
}
if(bottom < 0) {
bottom = 0;
top = o_top + o_bottom;
}
if(left < 0) {
left = 0;
right = o_right + o_left;
}
if(right < 0) {
right = 0;
left = o_right + o_left;
}
this.setPosition({top: top, bottom: bottom, left: left, right: right});
return false;
}
function stopDrag(ev) {
if(this.container.releaseCapture) {
this.container.releaseCapture();
}
$(document).off("mousemove.container");
$(document).off("mouseup.container");
return false;
}
}
}
En este punto, un zoom de apoyo y arrastrar y soltar el objeto de cuadro ha sido creado, pero todavía no se ha implementado la función inicial de imagen, de hecho, sacar las ideas iniciales de caja más simple, se registra cuando el mousedown ratón para las coordenadas x, y y mouseup la x ratón, coordenadas y, y los valores de coordenadas, y establecen el ancho y la altura de la nueva div posicionado en él. Aquí está el código fuente, ordeno que en un plugin de jQuery.
$.fn.draw_drag_test = function(options) {
var position = {}
var elemWidth, elemHeight, o_x, o_y, d_x, d_y, rect, o_left, o_top;
var mouseDown = function(e) {
$(this).on({
'mousemove': mouseMove,
'mouseup': mouseUp
})
var elemLeft = $(this).offset().left,
elemTop = $(this).offset().top;
elemWidth = $(this).width();
elemHeight = $(this).height();
o_x = e.pageX;
o_y = e.pageY;
position.left = o_left = o_x - elemLeft;
position.top = o_top = o_y - elemTop;
rect = new newBox(options);
rect.container.css('z-index','100000000');
$(this).append(rect.container);
}
var mouseMove = function(e) {
var m_x = e.pageX,
m_y = e.pageY;
d_x = m_x - o_x;
d_y = m_y - o_y;
position.right = elemWidth - position.left - d_x;
position.bottom = elemHeight - position.top - d_y;
if(d_x < 0) {
position.right = elemWidth - o_left;
position.left = o_left + d_x;
}else {
position.left = o_left;
}
if(d_y < 0) {
position.bottom = elemHeight - o_top;
position.top = o_top + d_y;
}else {
position.top = o_top;
}
rect.setPosition(position);
}
var mouseUp = function(e) {
$(this).off('mouseup', mouseUp);
$(this).off('mousemove', mouseMove);
$(this).off('mousedown', mouseDown);
}
return this.each(function() {
$(this).off('mousedown').on({
'mousedown': mouseDown
})
return this;
})
}De hecho, aquí podemos ver a cabo, gracias a mecanismo orientado a objetos, que pueden alcanzar algunos muy simple marco de arrastrar y soltar. Y el método también dejó una interfaz de devolución de llamada para facilitar algún tipo de interacción de acuerdo a las diferentes necesidades de negocio.