چه روش هایی برای پیاده سازی drag and drop المنت های نرمال html وجود داره. البته اگه مجبور باشیم فقط از جاوا اسکریپت استفاده کنیم؟
مثلا یک دکمه ی رادیویی رو از تو یک div با ماوس بکشیم و بندازیم تو یک div دیگه ؟:18:
Printable View
چه روش هایی برای پیاده سازی drag and drop المنت های نرمال html وجود داره. البته اگه مجبور باشیم فقط از جاوا اسکریپت استفاده کنیم؟
مثلا یک دکمه ی رادیویی رو از تو یک div با ماوس بکشیم و بندازیم تو یک div دیگه ؟:18:
کد:http://www.webreference.com/programming/javascript/mk/column2/
کد:http://www.redips.net/javascript/drag-and-drop-table-content/
اینم کد نهایی که کار می کنه
کد:<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
var draged_item_id;
var counter = 10 ;
var mouseX, mouseY;
// MOUSE SECTION
{
function getMousePos(e)
{
if (!e)
var e = window.event||window.Event;
if('undefined'!=typeof e.pageX)
{
mouseX = e.pageX;
mouseY = e.pageY;
}
else
{
mouseX = e.clientX + document.body.scrollLeft;
mouseY = e.clientY + document.body.scrollTop;
}
}
// You need to tell Mozilla to start listening:
if(window.Event && document.captureEvents)
document.captureEvents(Event.MOUSEMOVE);
// Then assign the mouse handler
document.onmousemove = getMousePos;
// Then your mouseover function can just read mouseX and mouseY directly.
}
// END MOUSE SECTION
var is_drag;
function h_drag(ids)
{
is_drag = 1;
draged_item_id = ids;
}
function h_drop()
{
x =mouseX;
y =mouseY;
if(is_drag==1)
{
if(draged_item_id=="button1")
{
var ni = document.getElementById('scene');
var newel = document.createElement('button');
newel.setAttribute('id',"button2");
newel.innerHTML = "button";
newel.style.position = 'absolute';
newel.style.top = mouseY;
newel.style.left = mouseX;
ni.appendChild(newel);
}
if(draged_item_id=="checkbox1")
{
var ni = document.getElementById('scene');
var newel = document.createElement('input');
newel.setAttribute('id',"checkbox1");
newel.setAttribute('type',"checkbox");
newel.style.position = 'absolute';
newel.style.top = mouseY;
newel.style.left = mouseX;
ni.appendChild(newel);
}
if(draged_item_id=="password1")
{
var ni = document.getElementById('scene');
var newel = document.createElement('input');
newel.setAttribute('id',"button2");
newel.setAttribute('type',"password");
newel.style.position = 'absolute';
newel.style.top = mouseY;
newel.style.left = mouseX;
ni.appendChild(newel);
}
if(draged_item_id=="text1")
{
var ni = document.getElementById('scene');
var newel = document.createElement('input');
newel.setAttribute('id',"button2");
newel.setAttribute('type',"text");
newel.style.position = 'absolute';
newel.style.top = mouseY;
newel.style.left = mouseX;
ni.appendChild(newel);
}
if(draged_item_id=="radio1")
{
var ni = document.getElementById('scene');
var newel = document.createElement('input');
newel.setAttribute('id',"button2");
newel.setAttribute('type',"radio");
newel.style.position = 'absolute';
newel.style.top = mouseY;
newel.style.left = mouseX;
ni.appendChild(newel);
}
}
is_drag=0;
}
function show_code()
{
var scene1 = document.getElementById('scene');
var para1 = document.getElementById('p1');
str2 =scene1.innerHTML ;
para1.value = str2;
}
</script>
</head>
<body onmouseup="h_drop()" style="background-color:#966;" >
<table style="position:absolute; top:0px; left:805px;" width="150" height="400" border="3">
<tr>
<td><button id="button1" onmousedown="h_drag(this.id)" >BUTTON</button></td>
</tr>
<tr>
<td><input id="checkbox1" type="checkbox" onmousedown="h_drag(this.id)"/>
</td>
</tr>
<tr>
<td>
password field
<input title="password field" type="password" id="password1" onMouseDown="h_drag(this.id)"/></td>
</tr>
<tr>
<td> text input
<input type="text" id="text1" title="text area" onmousedown="h_drag(this.id)"/></td>
</tr>
<tr>
<td>
radio button
<p>
<input type="radio" name="radio" id="radio1" onmousedown="h_drag(this.id)" />
</p></td>
</tr>
</table><div onmouseover="this.style.cursor='crosshair';" id="scene" style="position:absolute;top:0px;left:0px; width:800px; height:600px;border:solid; border-color:#00F; border-width:medium;"></div>
<br/>
<button type="button" id="but2" onclick="show_code()" style="position:absolute; top:605px; left:0px;" >SHOW HTML CODE</button>
<br />
<textarea name="html" id="p1" style="position:absolute; left:0px;top:635px; width:615px; height:200px;border:solid; border-color:#00F; border-width:medium; "> press the code button to show THE HTML code of the area</textarea>
</body>
</html>
dynamic drive هم داشت از این کدها
مرسی بابت معرفی سایت من که از اول نشستم نوشتم. ولی خب واسه شروع خوبه که خودم بنویسم . عجب سایتیه
خواهش
خوب به نظره من چیزای آماده رو باید آدم استفاده کنه البته برای تمرین بنویسه بهتره ولی وقتی اسکرپیتی آمادش هست و از نظر cross browser بودن و ... مشکلی نداره بهترین کار اینه که از همونا استفاده کنیم و وقتمون رو صرف چیزای مهم تر کنیم:46:
منم کاملا موافقم.
چه کاریه برادر. از jQuery UI استفاده کن، می تونی دک و پوز درگ اند دراپتو تنظیم کنی.