Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.06.2012, 03:24
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Выделение текста при перемещении
Всем привет. Есть такой код:
var drag = document.getElementById('drag2');
    drag.onmousedown = function(e) {
      e = getEvent(e);
      var coords = getCoords(drag);
      var shiftX = e.pageX - coords.left;
      var shiftY = e.pageY - coords.top;
      document.onmousemove = function(e) {
        e = getEvent(e);
        drag.style.position = 'absolute';
        drag.style.left = e.pageX - shiftX + 'px';
        drag.style.top = e.pageY - shiftY + 'px';
        document.ondragstart = document.body.onselectstart = null;
      };
    };
    drag.onmouseup = function(e) {
      document.onmousemove = document.ondragstart = document.body.onselectstart = null;
    };
    drag.ondragstart = function(e) { return false; };


Проблема в том, что при перемещении элемента выделяются некоторые другие элементы расположенные на странице. Как от этого можно избавиться?
Ответить с цитированием
  #2 (permalink)  
Старый 07.06.2012, 13:19
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Обычно накрывают страницу блоком с прозрачным фоном, а элемент перемещают поверх этого блока. Еще как вариант, в CSS есть свойство user-select:none с разными префиксами.
Ответить с цитированием
  #3 (permalink)  
Старый 07.06.2012, 16:31
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Octane,
при перемещении делаю так: document.body.style.userSelect = 'none';
При отпускании кнопки делаю так: document.body.style.userSelect = 'text';
Но текст как выделялся так и продолжает.. Я наверно не правильно получаю доступ к стилям? Если да, то как правильно получить?
Ответить с цитированием
  #4 (permalink)  
Старый 07.06.2012, 21:46
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Наверное не наследуется дочерними элементами. Видел где-то скрипт, там в набор document.styleSheets добавляют что-то вроде body * {user-select: none}, потом удаляют, но если нужна кросс-браузерность, придется первый вариант использовать.
Ответить с цитированием
  #5 (permalink)  
Старый 07.06.2012, 22:24
Профессор
Отправить личное сообщение для bot87 Посмотреть профиль Найти все сообщения от bot87
 
Регистрация: 16.05.2011
Сообщений: 307

можно пожалуйста пример
" Обычно накрывают страницу блоком с прозрачным фоном, а элемент перемещают поверх этого блока."
__________________
Я только учусь.Ногами просьба не бить
Ответить с цитированием
  #6 (permalink)  
Старый 07.06.2012, 22:25
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Octane,
просто первый вариант каким-то громоздким кажется..
Ответить с цитированием
  #7 (permalink)  
Старый 08.06.2012, 02:01
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Да ничего там сложного:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>…</title>
	<style>
		body {
			margin: 0;
		}
		.page {
			position: relative;
		}
		#cover {
			display: none;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: #fff;
			opacity: 0.8;
		}
		#drag {
			position: absolute;
			top: 0;
			left: 0;
			width: 50px;
			height: 50px;
			background: #afa;
		}
	</style>
</head>
<body>
	<div class="page">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		<div id="cover"></div>
		<div id="drag"></div>
	</div>
	<script>
	(function () {
		var drag = document.getElementById("drag"),
			style = drag.style,
			cover = document.getElementById("cover"),
			offsetTop, offsetLeft;

		function onDrag(event) {
			style.top = event.pageY - offsetTop + "px";
			style.left = event.pageX - offsetLeft + "px";
		}

		function onDrop() {
			cover.style.display = "none";
			document.removeEventListener("mousemove", onDrag, false);
			document.removeEventListener("mouseup", onDrop, false);
		}
		
		drag.addEventListener("mousedown", function (event) {
			event.preventDefault();
			var rect = drag.getBoundingClientRect();
			offsetTop = event.pageY - rect.top;
			offsetLeft = event.pageX - rect.left;
			cover.style.display = "block";
			document.addEventListener("mousemove", onDrag, false);
			document.addEventListener("mouseup", onDrop, false);
		}, false);

		drag.addEventListener("dragstart", function (event) {
			event.preventDefault();
		}, false);

	}());
	</script>
</body>
</html>



-------
Opera как всегда круче всех

Последний раз редактировалось Octane, 13.06.2012 в 16:08. Причина: preventDefault для mousedown
Ответить с цитированием
  #8 (permalink)  
Старый 08.06.2012, 09:38
Профессор
Отправить личное сообщение для bot87 Посмотреть профиль Найти все сообщения от bot87
 
Регистрация: 16.05.2011
Сообщений: 307

спасибо
__________________
Я только учусь.Ногами просьба не бить
Ответить с цитированием
  #9 (permalink)  
Старый 13.06.2012, 15:03
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Octane,
да.. опера просто ужасно себя ведёт((
Мб есть какие-то способы обойти эти глюки в опере?
Ответить с цитированием
  #10 (permalink)  
Старый 13.06.2012, 15:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

(Sandr),
Воть тут вродь готовый плагин и без выделения текста
http://jqueryui.com/demos/draggable/
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оставить выделение при смене фокуса DZHETIGAPA Events/DOM/Window 5 01.02.2018 20:11
События при перемещении между вкладками only_dimon Events/DOM/Window 2 05.02.2015 01:21
Выделение текста в текстовом поле. Как снять выделение с пробела вконце? Roman Koff Events/DOM/Window 10 01.07.2010 16:48
Выделение текста при использовании слайдера x00xer Firefox/Mozilla 8 29.09.2009 07:45
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 18:02