Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.06.2016, 14:38
Аспирант
Отправить личное сообщение для korih Посмотреть профиль Найти все сообщения от korih
 
Регистрация: 02.06.2016
Сообщений: 36

перетаскивание объекта по координатам Y
Добрый день всем.

Встретился с неприятностью перетаскивания элемента.

моя писанина к сожалению работает не совсем так как я себе это представлял. при нажатии на элемент и ведением мышки вверх-вниз, элемент переносится только вниз, но вверх почему-то не хочет(


var client;

$("#auth").mousedown(function() {
	client = true
	$(this).mousemove(function(event) {
	var clientCoords = event.clientY;
	if(client == true){
	$("#auth").css({marginTop: clientCoords});
	}
	});

});
$(this).mouseup(function() {
	client = false;
});
Ответить с цитированием
  #2 (permalink)  
Старый 18.06.2016, 14:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,338

korih,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .hot{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
$(function() {
    var client;
    $("#auth").mousedown(function() {
        client = true
    });
    $("body").mouseup(function() {
        client = false
    }).mousemove(function(event) {
        var clientCoords = event.clientY - $("#auth").height() / 2;
        if (client == true) $("#auth").css({
            marginTop: clientCoords
        })
    })
});
  </script>
</head>

<body>

 <div class="hot" id="auth"></div>

</body>
</html>

Последний раз редактировалось рони, 18.06.2016 в 14:53.
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2016, 14:54
Аспирант
Отправить личное сообщение для korih Посмотреть профиль Найти все сообщения от korih
 
Регистрация: 02.06.2016
Сообщений: 36

спасибо, только вот хотел написать, что додумал проблему, он делал отступ к началу координат)

$(".box").mousedown(function() {
	client = true
	$(this).mousemove(function(event) {
	var clientCoords = event.clientY;
	if(client == true){
	$(this).css({top: clientCoords/2});
	}
	});

});
$(this).mouseup(function() {
	client = false;
});
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2016, 16:52
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 573

рони, у тебя при mousemove, если взять блок за край – он резко прыгает центром под курсор мыши.
Ответить с цитированием
  #5 (permalink)  
Старый 18.06.2016, 16:54
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 573

<style>
	.hot {
		border: 1px dashed gray;
		padding: 5px;
		height: 100px;
		width: 100px;
		cursor: pointer;
	}
</style>

<div class="hot" id="auth"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
	$(function() {
		var client;
		var shiftY;

		$('#auth').mousedown(function() {
			client = true;
			shiftY = event.clientY - ( $('#auth').offset().top - $(window).scrollTop() );
		});

		$('body').mouseup(function() {
			client = false;
		}).mousemove(function(event) {
			var clientCoords = event.clientY - shiftY;

			if (client == true) {
				$('#auth').css({
					marginTop: clientCoords
				});
			}
		});
	});
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 18.06.2016, 18:03
Аспирант
Отправить личное сообщение для korih Посмотреть профиль Найти все сообщения от korih
 
Регистрация: 02.06.2016
Сообщений: 36

а что бы так же ровно было и по левой стороне (кружить по всей странице в итоге), то так будет?

var client;
        var shiftY;
        var shiftX;
 
        $('.box').mousedown(function(event) {
            client = true;
            shiftY = event.clientY - ( $('.box').offset().top - $(window).scrollTop() );
            shiftX = event.clientX - ( $('.box').offset().left - $(window).scrollLeft() );
        });
 
        $('body').mouseup(function() {
            client = false;
        }).mousemove(function(event) {
            var clientCoordsY = event.clientY - shiftY;
            var clientCoordsX= event.clientX - shiftX;

 
            if (client == true) {
                $('.box').css({
                    marginTop: clientCoordsY,
                    marginLeft: clientCoordsX
                });
            }
        });
Ответить с цитированием
  #7 (permalink)  
Старый 18.06.2016, 18:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,338

korih,
https://learn.javascript.ru/drag-and-drop

https://learn.javascript.ru/drag-and-drop-objects

http://jqueryui.com/draggable/

Последний раз редактировалось рони, 18.06.2016 в 18:43.
Ответить с цитированием
  #8 (permalink)  
Старый 19.06.2016, 00:57
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 508

Перетаскивание объекта
<body>

<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.square {
  position: relative;
  top: 0;
  
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  padding: 10px;
  
  cursor: move;
  
  color: white;
  background: coral;
}

.square:active {
  transform: rotate3d(-1, 1, 0, 10deg);
}
</style>

<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>

<div class="square"></div>

<script>
  init('.square');
  
  function init(elem) {
    var 
      $square = $(elem),
      press = false,
      ofsY,
      ofsX;
    
    $square.on('mousedown mouseup mouseleave', function(event) {
      press = pressState(event);
      
      ofsY = event.pageY - $square.offset().top;
      ofsX = event.pageX - $square.offset().left;
    });
    
    function pressState(event) {
      if (event.type === 'mousedown') {
        return true;
      }
      return false;
    }
  
    $('body').mousemove(function(event) {
      $square.html('y: ' + event.pageY + ' x: ' + event.pageX);
  
      if (press) {
        $square.css({
          'margin-top': event.pageY - ofsY,
          'margin-left': event.pageX - ofsX
        });
      }
      
    });
  }
</script>

</body>
Ответить с цитированием
  #9 (permalink)  
Старый 19.06.2016, 04:32
Аспирант
Отправить личное сообщение для korih Посмотреть профиль Найти все сообщения от korih
 
Регистрация: 02.06.2016
Сообщений: 36

Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скорость объекта при движении к координатам slava1992 Events/DOM/Window 2 04.10.2014 20:26
Перетаскивание внутри ifram'a. kodemak Общие вопросы Javascript 2 14.01.2014 08:24
Canvas. Как сделать или вообще нельзя? Вращение рандомизированно изменяемого объекта. Zemsky Общие вопросы Javascript 30 19.12.2013 18:44
Скрипт вычисления координат объекта banderasantonio197555 Events/DOM/Window 4 16.08.2011 17:37
Можно ли получить имя экземпляра объекта внутри самого объекта? Ichigeki Общие вопросы Javascript 9 14.11.2008 19:00