Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.06.2012, 21:58
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

drag & drop, mouseup
пишу фреймворк который перемещает элементы в определенный блок,
так вот задумался а как лучше определять вошел элемент в нужную область или нет , есть 2 варианта :
1. использовать document.elementFromPoint(clientX, clientY)

2. определить границы элемента и проверять зашел ли курсор в нужную область
Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2012, 23:23
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от cyber
1. использовать document.elementFromPoint(clientX, clientY)
А кто мешает это юзать? вроде насколько мне помнится это и в ИЕ отлично работает, даже IE7 если не ошибавюсь.
<!doctype html>
<html>
	<head>
	</head>
	<body>

<div id="dragged" style=" top: 10px; width: 50px; height: 50px; background-color: #0f0; position: absolute;"></div>
<div id="target" style="position: absolute; border: 10px solid #f00; left: 50%; top: 40%; width: 100px; height: 100px; background-color: #f00;"></div>

<script type="text/javascript">

var oX, oY, elmousedowned = null;

document.getElementById('dragged').onmousedown = function( e ) {

	e = e || window.event;

    elmousedowned = e.target || event.srcElement;

    oX = e.offsetX || e.layerX;
    oY = e.offsetY || e.layerY;

    elmousedowned.style.zIndex = 100;
}
document.onmousemove = function( e ) {
    if ( elmousedowned ) {

		e = e || window.event;

		if ( e.pageX == null && e.clientX != null ) {
			var html = document.documentElement;
			var body = document.body;
			e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
			e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
		}

        elmousedowned.style.left = ( e.pageX - oX ) + "px";
        elmousedowned.style.top = ( e.pageY - oY ) + "px";

        // временно уберем перетаскиваемый элемент, что бы увидеть что под курсором
        elmousedowned.style.display = 'none';

        var el = document.elementFromPoint( e.pageX, e.pageY );

        if ( el && el === document.getElementById('target') ) {
            el.style.borderColor = "#00f";
        } else {
            document.getElementById('target').style.borderColor = "#f00";
        }

        elmousedowned.style.display = 'block';
    }
}
document.onmouseup = function() {
	if ( elmousedowned ) {
	    elmousedowned.style.zIndex = "";
	    elmousedowned = null;
	}
}
</script>

	</body>
</html>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #3 (permalink)  
Старый 27.06.2012, 23:40
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от devote Посмотреть сообщение
А кто мешает это юзать? вроде насколько мне помнится это и в ИЕ отлично работает, даже IE7 если не ошибавюсь.
<!doctype html>
<html>
	<head>
	</head>
	<body>

<div id="dragged" style=" top: 10px; width: 50px; height: 50px; background-color: #0f0; position: absolute;"></div>
<div id="target" style="position: absolute; border: 10px solid #f00; left: 50%; top: 40%; width: 100px; height: 100px; background-color: #f00;"></div>

<script type="text/javascript">

var oX, oY, elmousedowned = null;

document.getElementById('dragged').onmousedown = function( e ) {

	e = e || window.event;

    elmousedowned = e.target || event.srcElement;

    oX = e.offsetX || e.layerX;
    oY = e.offsetY || e.layerY;

    elmousedowned.style.zIndex = 100;
}
document.onmousemove = function( e ) {
    if ( elmousedowned ) {

		e = e || window.event;

		if ( e.pageX == null && e.clientX != null ) {
			var html = document.documentElement;
			var body = document.body;
			e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
			e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
		}

        elmousedowned.style.left = ( e.pageX - oX ) + "px";
        elmousedowned.style.top = ( e.pageY - oY ) + "px";

        // временно уберем перетаскиваемый элемент, что бы увидеть что под курсором
        elmousedowned.style.display = 'none';

        var el = document.elementFromPoint( e.pageX, e.pageY );

        if ( el && el === document.getElementById('target') ) {
            el.style.borderColor = "#00f";
        } else {
            document.getElementById('target').style.borderColor = "#f00";
        }

        elmousedowned.style.display = 'block';
    }
}
document.onmouseup = function() {
	if ( elmousedowned ) {
	    elmousedowned.style.zIndex = "";
	    elmousedowned = null;
	}
}
</script>

	</body>
</html>
спасибо, за развернутый ответ но весь код можно было не писать.
просто у меня были сомнения насчет первого варианта как определить когда элемент просто держат на итоговым блоком но еще не произошло mouseup..
но как раз в вашем коде можно глянуть как это реализовано так что
Ответить с цитированием
  #4 (permalink)  
Старый 27.06.2012, 23:47
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

а не сильно ли напряжно для браузера каждый раз менять при смещение на пик сель менять display
Ответить с цитированием
  #5 (permalink)  
Старый 28.06.2012, 00:16
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

вот что у меня получилось
http://cyberua.16mb.com/drag&drop/
но проблема в том что когда элементов больше чем блок они выходят за его границы , как можно опередить когда нужно увеличивать его высоту или ширину?
Ответить с цитированием
  #6 (permalink)  
Старый 28.06.2012, 00:22
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

все проблему решил=)
Ответить с цитированием
  #7 (permalink)  
Старый 28.06.2012, 00:29
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

не все таки от чужих идей не откажусь=)
если ставить height auto то не очень красиво=)
Ответить с цитированием
  #8 (permalink)  
Старый 28.06.2012, 06:20
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от cyber
а не сильно ли напряжно для браузера каждый раз менять при смещение на пик сель менять display
браузер не успевает запустить периресовку. Поэтому напряга не должно быть.

Сообщение от cyber
вот что у меня получилось
у меня не работает:
[17.02.1972 15:33:22] JavaScript - http://cyberua.16mb.com/drag&drop/
Event thread: mousedown
Uncaught exception: DOMException: NO_MODIFICATION_ALLOWED_ERR
Error thrown at line 61, column 5 in <anonymous function: down>(e) in http://cyberua.16mb.com/drag&drop/drag_manager/drag.js:
    e.target = e.target || e.srcElement;
called from line 20, column 6 in <anonymous function: onmousedown>(e) in http://cyberua.16mb.com/drag&drop/drag_manager/drag.js:
    if(!action.down(e))
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #9 (permalink)  
Старый 28.06.2012, 10:16
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от devote Посмотреть сообщение
браузер не успевает запустить периресовку. Поэтому напряга не должно быть.


у меня не работает:
[17.02.1972 15:33:22] JavaScript - [url]http://cyberua.16mb.com/drag&drop/[/url]
Event thread: mousedown
Uncaught exception: DOMException: NO_MODIFICATION_ALLOWED_ERR
Error thrown at line 61, column 5 in <anonymous function: down>(e) in [url]http://cyberua.16mb.com/drag&drop/drag_manager/drag.js:[/url]
    e.target = e.target || e.srcElement;
called from line 20, column 6 in <anonymous function: onmousedown>(e) in [url]http://cyberua.16mb.com/drag&drop/drag_manager/drag.js:[/url]
    if(!action.down(e))
а что за браузер?
я у себя даже в ие7 проверял, там ток opacity не работает
Ответить с цитированием
  #10 (permalink)  
Старый 28.06.2012, 10:29
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

попробуйте еще раз http://cyberua.16mb.com/drag&drop/ пере залил все файлы
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отмена drag and drop браузера l-liava-l Элементы интерфейса 0 02.04.2012 12:53
Помогите с drag and drop shtopor jQuery 1 20.02.2012 11:26
Разбираюсь с drag and drop uaNikita Events/DOM/Window 4 22.09.2011 10:25
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 12:01
Drag & Drop в полном объеме dizews Events/DOM/Window 3 26.07.2007 11:43