Javascript jQuery图像拖入父元素
您好,我有一些问题:在我的示例中,您可以将图像拖到div元素中。但若你们拖动元素,比如说,左图像向左,它会工作,但我需要当拖动图像向左时停止拖动,当图像左==角。 对不起我的英语 首先,试着用我的例子来理解我的意思 范例` 现在 我需要什么Javascript jQuery图像拖入父元素,javascript,jquery,drag-and-drop,Javascript,Jquery,Drag And Drop,您好,我有一些问题:在我的示例中,您可以将图像拖到div元素中。但若你们拖动元素,比如说,左图像向左,它会工作,但我需要当拖动图像向左时停止拖动,当图像左==角。 对不起我的英语 首先,试着用我的例子来理解我的意思 范例` 现在 我需要什么 下面是一个工作示例 $(".map-wrap").height($(window).height() - 50); $(".map-wrap .plus").on("click", function(){ var zoomLevel = pa
下面是一个工作示例
$(".map-wrap").height($(window).height() - 50);
$(".map-wrap .plus").on("click", function(){
var zoomLevel = parseInt($(".map-wrap .map-main").attr("data-zoom"));
if (zoomLevel <= 3) {
$(".map-wrap .map-main").attr("data-zoom", zoomLevel + 1);
var zoom = Math.round($(".map-wrap img").width() * 1.2);
$(".map-wrap .drag").css({
width: zoom,
left: ($(window).width() - zoom) /2
});
}
return false;
});
$(".map-wrap .minus").on("click", function(){
var zoomLevel = parseInt($(".map-wrap .map-main").attr("data-zoom"));
if (zoomLevel > 0) {
$(".map-wrap .map-main").attr("data-zoom", zoomLevel - 1);
var zoom = Math.round($(".map-wrap img").width() / 1.2);
$(".map-wrap .drag").css({
width: zoom,
left: ($(window).width() - zoom) /2
});
}
return false;
});
var $dragging = null;
var mY = 0;
var mX = 0;
$('body').on("mousedown", ".drag", function(e) {
$(this).attr('unselectable', 'on').addClass('draggable');
var $dragged = $('.draggable');
var x = $dragged.offset().left - e.pageX,
y = $dragged.offset().top - e.pageY,
z = $dragged.css('z-index');
var windowWidth = $(window).width();
var windowHeight = $(".map-wrap").height();
var elemWidth = $(".map-main").width();
var elemHeight = $(".map-main").height();
var cordsY = e.pageY;
var cordsX = e.pageX;
$dragged.css('cursor', 'move');
$('.map-wrap').on("mousemove", function(e) {
if ($dragging) {
/*if (e.pageY < mY) {
if($dragged.offset().left >= windowHeight - elemHeight) {
}
} else {
if($dragged.offset().left <= 0) {
}
}
if (e.pageX < mX) {
if($dragged.offset().left <= windowWidth - elemWidth) {
return false;
}
} else {
if($dragged.offset().left <= 0) {
//return false;
}
}
mY = e.pageY;
mX = e.pageX;*/
var left = Math.round(x + e.pageX);
var top = Math.round(y + e.pageY);
if (left > 0) left = 0;
if (left < windowWidth - elemWidth) left = windowWidth - elemWidth;
if (top > 0) top = 0;
if (top < (windowHeight - elemHeight)) top = (windowHeight - elemHeight);
$dragging.offset({
left: left,
top: top
});
}
});
$dragging = $(e.target);
}).on("mouseup", ".draggable", function(e) {
$dragging = null;
$('.draggable').css('cursor', 'default');
$(this).removeAttr('unselectable').removeClass('draggable');
});
我不能在你的jFiddle中拖动任何东西,因为首先按下左边的第一个橙色按钮,在拖动开始工作后向左缩放一个。Fiddle在拖动时什么也不做