Javascript-форум - Выделение текста при перемещении

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Выделение текста при перемещении (https://javascript.ru/forum/dom-window/28916-vydelenie-teksta-pri-peremeshhenii.html)

Выделение текста при перемещении

Всем привет. Есть такой код:

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; };

Проблема в том, что при перемещении элемента выделяются некоторые другие элементы расположенные на странице. Как от этого можно избавиться?

Обычно накрывают страницу блоком с прозрачным фоном, а элемент перемещают поверх этого блока. Еще как вариант, в CSS есть свойство user-select:none с разными префиксами.

Octane,
при перемещении делаю так: document.body.style.userSelect = 'none';
При отпускании кнопки делаю так: document.body.style.userSelect = 'text';
Но текст как выделялся так и продолжает.. Я наверно не правильно получаю доступ к стилям? Если да, то как правильно получить?

Наверное не наследуется дочерними элементами. Видел где-то скрипт, там в набор document.styleSheets добавляют что-то вроде body * {user-select: none}, потом удаляют, но если нужна кросс-браузерность, придется первый вариант использовать.

можно пожалуйста пример
" Обычно накрывают страницу блоком с прозрачным фоном, а элемент перемещают поверх этого блока."

Octane,
просто первый вариант каким-то громоздким кажется..

Да ничего там сложного:

<!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 как всегда круче всех :D

Octane,
да.. опера просто ужасно себя ведёт((
Мб есть какие-то способы обойти эти глюки в опере?

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

(Sandr), добавьте еще preventDefault для mousedown

drag.addEventListener("mousedown", function (event) {
			*!*event.preventDefault();*/!*
			var rect = drag.getBoundingClientRect();
			…

А чтобы прорисовывалось не рывками, можно попробовать по mousemove только записывать координаты, а блок перемещать с определенным интервалом времени, ну или вообще requestAnimationFrame запилить.