مهدی رستگار
5 سال پیش
توسط مهدی رستگار
مطرح شد
طراحی قالب به روش drag and drup
دوستان کسی با سایت instapage آشنایی داره؟؟ مربوط به طراحی وب هست به روش drag and drop
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
مهدی رستگار
تخصص :
توسعه دهنده frontend &amp...
@rm.8968
5 سال پیش
مطرح شد
توسعه دهنده frontend & backend
گزارش تخلف
کپی کردن
گزارش تخلف
کپی کردن
1
drag and drop یکی از ویژگی‌های HTML5 هست و هر المانی میتونه draggable یا "قابل گرفتن" باشه.
باید به المان یه attribute به نام draggable=true اضافه کنید.
که این کار باعث میشه به یه سری رویداد ها هم دسترسی داشته باشید مثل : ondrop و ondragstart و ondragover
به کمک رویداد ها و یه سری توابع کاستوم در جاوااسکریپت میشه این قابلیت رو به شکل زیر پیاده کرد:
HTML:
<html>
<head>
<style>
#div1, #div2 {
width: 200px;
height: 35px;
margin: 50px auto;
padding: 50px auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div ondrop="drop(event)" ondragover="allowDrop(event)" id="div1">
<img draggable="true" ondragstart="drag(event)" src="img.png" id="drag1" width="88" height="31">
</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)" id="div2"></div>
</body>
</html>
Javascript:
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>به این ترتیب می‌تونید تصویر رو از این Div به Div دیگه و بر عکس ، جا به جا کنید.