طراحی قالب به روش drag and drup
دوستان کسی با سایت instapage آشنایی داره؟؟ مربوط به طراحی وب هست به روش drag and drop
ثبت پرسش جدید
پاسخ‌ها
2
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 دیگه و بر عکس ، جا به جا کنید.
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد