Не работает js если указываю DOCTYPE

@shtopor20 · Регистрация: 21.05.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте, нашел на сайте код для drag and drop: Drag and Drop в JavaScript
Но если я указываю доктайп код перестает работать (причем не только доктайп html 5)

@kalabuni · 14.12.2012, 17:25

а без доктайпа где работает?

в MSIE и в Opere?
ведь только они понимают event и pixelLeft с pixelTop...
в других браузерах не пробовали?
-------

скрипт, который вы нашли, выложен здесь в 2009 году
но ему до выкладки лет 5 минимум было
современных скриптов, работающих во всех браузерах и с доктайпом, и без него - море
поищите гуглем https://www.google.ru/search?q... JavaScript

@shtopor20 · 14.12.2012, 18:03 **[ТС]**

Не работает в хроме, а без доктайпа соответственно все супер

Добавлено через 52 секунды
я заменял pixelLeft на left (соответственно убирая px). результат не менялся

Добавлено через 33 минуты
Только что заменил event на кросбраузерную функцию для получения координат. Но всеравно в хроме при добавлении доктайпа все слетает

@newJS · 15.12.2012, 20:35

тоже не вчера написано, но 17я лиса и 6йосел кушают
события можно по разному навесить, каждый вариант со своим хорошо/плохо

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Перетаскиваем элементы.</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="CSE HTML Validator Халявной Версии">
<script type="text/javascript" src="drag3.js"></script>
</head>
 
<body oncontextmenu="return false" onselectstart="return false">
 
<br><br><br><br><br>
<div>При отсутствии картинки можно её контур показывать рамкой, и/или использовать АЛЬТ-подсказку, учитывая, что каждый браузер показывает этот текст по своему. Не забываем и про ТИТЛЕ-подсказку. Обязательно указываем оба размера каждой картинки.</div>
 
<img id="NoDnD_el" src="dnd_pic/a0.gif" alt="" style="position:absolute; top:200px; left:50px; cursor:default;" width="80" height="80" border="1">
 
<img id="DnD_el0" src="dnd_pic/i0.gif" alt="1я подсказочка" title="2я подсказочка" style="position:absolute; top:300px; left:50px; cursor:move;" width="80" height="80" border="1">
 
<img id="DnD_el1" src="dnd_pic/m0.gif" alt="2я" style="position:absolute; top:300px; left:150px; cursor:move;" width="80" height="80">
 
<img id="DnD_el2" src="dnd_pic/g0.gif" alt="3я" style="position:absolute; top:300px; left:250px; cursor:move;" width="80" height="80" border="1">
 
<div id="DnD_el3" style="position:absolute; top:300px; left:550px; cursor:move; background:blue; color:white; padding:5px;">просто текст, берём,<br>и тоже тащим</div>
 
<div id="DnD_el4" style="position:absolute; top:200px; left:150px; cursor:move; padding:5px;">голый текст, берём,<br>и тоже тащим</div>
 
<div id="mnb" style="color:red; font-size:150%; font-weight:bold;">0</div>
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//zIn=?? количество элементов подлежащих перетаскиванию, это число нужно, чтобы перетаскиваемый элемент всегда был выше остальных. Если в этом нет надобности, можно удалить. При необходимости можно и скриптом посчитать.
var elY, elX, obj, zIn=5;
document.onmousedown=mDown;
document.onmouseup=mUp;
 
function mDown(ev){
if(ev){//остальные
obj=ev.target;//получить объект элемента который "взяли"
//если у элемента есть ИД с таким префиксом
if(obj.id.indexOf("DnD_el")==0){
document.onmousemove=mMove;
elX=ev.clientX-parseInt(obj.style.left);
elY=ev.clientY-parseInt(obj.style.top);}}
else{//IE
obj=event.srcElement;
if(obj.id.indexOf("DnD_el")==0){
document.onmousemove=mMove;
elY=event.offsetY;
elX=event.offsetX;}};
obj.style.zIndex=zIn++;
return false;
 };//
//
function mMove(ev){
var y, x;
if(ev){x=parseInt(ev.clientX); y=parseInt(ev.clientY);}//остальные
else{x=event.clientX; y=event.clientY;};//ИЕ
obj.style.left=x-elX+"px";
obj.style.top=y-elY+"px";
document.getElementById("mnb").innerHTML=(y-elY)+' '+(x-elX);
return false;
 };//
//
function mUp(){document.onmousemove=null;};

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@shtopor20 47 / 36 / 0 Регистрация: 21.05.2010 Сообщений: 301

	Не работает js если указываю DOCTYPE 14.12.2012, 16:46. Показов 1251. Ответов 3 Метки нет (Все метки) Здравствуйте, нашел на сайте код для drag and drop: Drag and Drop в JavaScript Но если я указываю доктайп код перестает работать (причем не только доктайп html 5) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	14.12.2012, 17:25
	а без доктайпа где работает? в MSIE и в Opere? ведь только они понимают event и pixelLeft с pixelTop... в других браузерах не пробовали? ------- скрипт, который вы нашли, выложен здесь в 2009 году но ему до выкладки лет 5 минимум было современных скриптов, работающих во всех браузерах и с доктайпом, и без него - море поищите гуглем https://www.google.ru/search?q... JavaScript 0

@shtopor20 47 / 36 / 0 Регистрация: 21.05.2010 Сообщений: 301
	14.12.2012, 18:03 [ТС]
	Не работает в хроме, а без доктайпа соответственно все супер Добавлено через 52 секунды я заменял pixelLeft на left (соответственно убирая px). результат не менялся Добавлено через 33 минуты Только что заменил event на кросбраузерную функцию для получения координат. Но всеравно в хроме при добавлении доктайпа все слетает 0