Javascript.RU

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

drag & drop , html 5
продолжаю работу с drag and drop , и решил добавить html 5 drag and drop
и столкнулся с проблемой, к примеру есть такой код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Пример Drag and Drop в HTML 5</title>
<style>

#dropTarget {
 width: 530px;
 height: 200px;
 border: 3px dotted black;
 }

</style>
</head>
<body>
 <img src="http://html5blog.ru/news/images/HTML5_3D_Effects_64.png" alt="HTML5 3D Effects" />
 <img src="http://html5blog.ru/news/images/HTML5_Connectivity_64.png" alt="HTML5 Connectivity" />
 <img src="http://html5blog.ru/news/images/HTML5_Device_Access_64.png" alt="HTML5 Device Access" />
 <img src="http://html5blog.ru/news/images/HTML5_Multimedia_64.png" alt="HTML5 Multimedia" />
 <img src="http://html5blog.ru/news/images/HTML5_Offline_Storage_64.png" alt="HTML5 Offline Storage" />
 <img src="http://html5blog.ru/news/images/HTML5_Performance_64.png" alt="HTML5 Performance" />
 <img src="http://html5blog.ru/news/images/HTML5_Semantics_64.png" alt="HTML5 Semantics" />
 <img src="http://html5blog.ru/news/images/HTML5_Styling_64.png" alt="HTML5 Styling" />
 <div id="dropTarget" ondragenter="cancel(event)" ondragover="cancel(event)" ></div>
<script type="text/javascript">	
document.body.ondragstart = function(event){
   event.target.id = "now_drag_obj";
	event.dataTransfer.setData("obj","now_drag_obj")
	
}
document.body.ondragend = function(event){
   event.target.id = "";
   }	

document.getElementById("dropTarget").ondrop = function(event){
	
	var obj = event.dataTransfer.getData("obj");
	 var elem = document.getElementById("now_drag_obj");
	 this.appendChild(elem);

	  this.style.border = "2px dashed black";
  return false;
  }


function cancel(event){
  if (event.preventDefault){
    event.preventDefault();
    }
  return false;
}
</script>
</body>
</html>

что бы перемещать обьект приходится присваивать ему id и поэтому id потом искать(первое что в голову пришло), поискав на зарубежных ресурсах , альтернатив не на шел , я так понял через event.dataTransfer.setData нельзя передать event.target (или все таки как то можно?).
П.с я знаю что можно при событие заносить target в свойство какого то обьекта и через него работать как вариант...
и ще один вопрос :
зачем отменяют действия браузера по умолчанию , используют
preventDefault() (я понимаю зачем это делают вообще, но зачем для элементов переноса?)
Ответить с цитированием
  #2 (permalink)  
Старый 30.06.2012, 14:16
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

не ужели ни кто не шарит в хтмл 5 ?=)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с 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 Jquery irixxxxx jQuery 2 01.08.2011 15:58
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 12:01
Drag & Drop в полном объеме dizews Events/DOM/Window 3 26.07.2007 11:43