Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2011, 16:52
Аспирант
Отправить личное сообщение для shtopor Посмотреть профиль Найти все сообщения от shtopor
 
Регистрация: 02.05.2010
Сообщений: 68

В Firefox не работает передвижение оюъеката
Здравствуйте, помогите пожалуйста, нашел в сети такой вот код:
<div style="position:relative; width:450px; height:125px; cursor:pointer">
 
<img src="bear.jpg" style="position:absolute; left:15px; top:10px"
onmousedown="Move(this)">
 
<div style="position:absolute; left:190px; top:10px; width:170px; 
border: 1px solid; padding:5; text-align:left; background-color:white" 
onmousedown="Move(this)">
Этот компонент имеет постоянный размер.
</div>
 
<div style="position:absolute; left:380px; top:10px" onmousedown="Move(this)">
Этот компонент не имеет постоянный размер.
</div>
 
<script type="text/javascript">
var SelectedItem;
var SelectedX, SelectedY;
var MouseX, MouseY;
 
function Move(ClickedItem)
{
SelectedItem = ClickedItem;
SelectedX = SelectedItem.style.pixelLeft;
SelectedY = SelectedItem.style.pixelTop;
MouseX = event.clientX;
MouseY = event.clientY;
document.onmousemove = Drag;
document.onmouseup = Drop;
}
 
 
function Drag()
{
SelectedItem.style.left = SelectedX + (event.clientX - MouseX);
SelectedItem.style.top = SelectedY + (event.clientY - MouseY);
return false;
}
 
function Drop()
{
document.onmousemove = null;
document.onmouseup = null;
}
 
</script>

Но он не работает в FF, что делать?
Ответить с цитированием
  #2 (permalink)  
Старый 29.10.2011, 17:31
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

на этом сайте есть статья про drag'n'drop. можно взять код оттуда.
Ответить с цитированием
  #3 (permalink)  
Старый 29.10.2011, 17:53
Аспирант
Отправить личное сообщение для shtopor Посмотреть профиль Найти все сообщения от shtopor
 
Регистрация: 02.05.2010
Сообщений: 68

Я пробовал, там он длинный и неудобный, этот очень простой и красивый, но в FF не работает(
Ответить с цитированием
  #4 (permalink)  
Старый 29.10.2011, 19:11
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от shtopor
Я пробовал, там он длинный и неудобный, этот очень простой и красивый, но в FF не работает(
чем?тем что всплытие не останавливает? тем что не отменяет действия браузера стандартные?....
Сообщение от shtopor
SelectedX = SelectedItem.style.pixelLeft;
SelectedY = SelectedItem.style.pixelTop;
pixelLeft,pixelTop-тяжело проверить теми же алертами есть ли такие свойства в фф?
Ответить с цитированием
  #5 (permalink)  
Старый 29.10.2011, 19:37
Аспирант
Отправить личное сообщение для shtopor Посмотреть профиль Найти все сообщения от shtopor
 
Регистрация: 02.05.2010
Сообщений: 68

Мне не очень понравился код в той статье

Последний раз редактировалось shtopor, 29.10.2011 в 19:39.
Ответить с цитированием
  #6 (permalink)  
Старый 29.10.2011, 19:42
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от shtopor
Там код нарезан кривыми кусками, которые у меня просто не работают
странно...а может стоит ещё прочитать статью?
а по мне этот "красивый" кривее некуда
Ответить с цитированием
  #7 (permalink)  
Старый 29.10.2011, 20:23
Аспирант
Отправить личное сообщение для shtopor Посмотреть профиль Найти все сообщения от shtopor
 
Регистрация: 02.05.2010
Сообщений: 68

Ну вот код из статьи, почему он не работает:
var dragMaster = (function() {

	var dragObject
	var mouseOffset

	// получить сдвиг target относительно курсора мыши
	function getMouseOffset(target, e) {
		var docPos	= getPosition(target)
		return {x:e.pageX - docPos.x, y:e.pageY - docPos.y}
	}

	function mouseUp(){
		dragObject = null

		// очистить обработчики, т.к перенос закончен
		document.onmousemove = null
		document.onmouseup = null
		document.ondragstart = null
		document.body.onselectstart = null
	}

	function mouseMove(e){
		e = fixEvent(e)

		with(dragObject.style) {
			position = 'absolute'
			top = e.pageY - mouseOffset.y + 'px'
			left = e.pageX - mouseOffset.x + 'px'
		}
		return false
	}

	function mouseDown(e) {
		e = fixEvent(e)
		if (e.which!=1) return

		dragObject  = this

		// получить сдвиг элемента относительно курсора мыши
		mouseOffset = getMouseOffset(this, e)

		// эти обработчики отслеживают процесс и окончание переноса
		document.onmousemove = mouseMove
		document.onmouseup = mouseUp

		// отменить перенос и выделение текста при клике на тексте
		document.ondragstart = function() { return false }
		document.body.onselectstart = function() { return false }

		return false
	}

	return {
		makeDraggable: function(element){
			element.onmousedown = mouseDown
		}
	}

}())

function getPosition(e){
	var left = 0
	var top  = 0

	while (e.offsetParent){
		left += e.offsetLeft
		top  += e.offsetTop
		e	 = e.offsetParent
	}

	left += e.offsetLeft
	top  += e.offsetTop

	return {x:left, y:top}
}
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Раскрывающийся список не работает в FireFox Andy-LC Элементы интерфейса 12 08.02.2011 10:47
помогите найти ошибку (работает в IE но не работает в Firefox) Len4ik Javascript под браузер 2 11.05.2010 15:41
Динамическая HTML форма (FireFox - работает, IE - не работает) dm1tr1y Общие вопросы Javascript 10 11.12.2009 15:59
В Firefox 3.5.5 не работает метод POST. Какие методы лечения? javascript_pupil AJAX и COMET 1 10.12.2009 20:34
Скрипт меню не работает только в Firefox somatic Firefox/Mozilla 2 28.07.2009 03:23