مهدی رستگار
5 سال پیش توسط مهدی رستگار مطرح شد
2 پاسخ

طراحی قالب به روش drag and drup

دوستان کسی با سایت instapage آشنایی داره؟؟ مربوط به طراحی وب هست به روش drag and drop


ثبت پرسش جدید
مهدی رستگار
تخصص : توسعه دهنده frontend &amp...
@rm.8968 5 سال پیش مطرح شد
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش مطرح شد
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 دیگه و بر عکس ، جا به جا کنید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام