Drag & Drop DOM Elements using HTML5 and JavaScript
9
כיצד אפשר לגרור אלמנטים בעמוד בעזרת javascript ו - HTML5
בהמשך
לפוסטים על IE9 נראה כיצד אפשר בקלות בעזרת HTML5 לגרור אלמנטים בעמוד
נניח שיש לנו את ה - html הבא
<style type="text/css">
body
{
font-family: Arial;
}
div
{
border: solid 1px black;
background-color: Silver;
width: 200px;
height: 200px;
position:absolute;
}
</style>
<div ondrag="dragStartHandler(event)">
shlomo Goldberg<br />
shlomo Goldberg<br />
shlomo Goldberg<br />
shlomo Goldberg<br />
shlomo Goldberg<br />
shlomo Goldberg<br />
</div>
<script>
function dragStartHandler(event) {
event.effectAllowed = 'move';
event.srcElement.style.top = event.y + 'px';
event.srcElement.style.left = event.x + 'px';
}
</script>
וזהו, כעת המשתמש יכול לבחור את התוכן של ה - div ופשוט לגרור אותו בעמוד
(איזה כיף שיש HTML5 ואיזה כיף ש - IE תומך בזה)