Javascript ile Sürükle Bırak Duyuru Panosu Yapalım

Fare ile istenilen alana sürükleyip bırakabileceğimiz bir duyuru panosu yapalım.....

Herkese selamlar,

Javascript ile istenilen alan sürükleyip bırakabileceğimiz bir uygulama yapalım ben duyuru panosu şeklinde yaptım ama siz isterseniz resim,link vs. olarak da değiştirebilirsiniz.

İlk olarak bir div oluşturalım ve ismini sanalkurs olarak değiştirelim ve vereceğim kodları tagları arasına yapıştırın.


<title>Ttasarim.net | Sürükle Bırak</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />

<script type="text/javascript">





var Drag = {



     obj : null,



     init : function(o, osanalkurs, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)

     {

          o.onmousedown     = Drag.start;



          o.hmode               = bSwapHorzRef ? false : true ;

          o.vmode               = bSwapVertRef ? false : true ;



          o.sanalkurs = osanalkurs && osanalkurs != null ? osanalkurs : o ;



          if (o.hmode  && isNaN(parseInt(o.sanalkurs.style.left  ))) o.sanalkurs.style.left   = "0px";

          if (o.vmode  && isNaN(parseInt(o.sanalkurs.style.top   ))) o.sanalkurs.style.top    = "0px";

          if (!o.hmode && isNaN(parseInt(o.sanalkurs.style.right ))) o.sanalkurs.style.right  = "0px";

          if (!o.vmode && isNaN(parseInt(o.sanalkurs.style.bottom))) o.sanalkurs.style.bottom = "0px";



          o.minX     = typeof minX != 'undefined' ? minX : null;

          o.minY     = typeof minY != 'undefined' ? minY : null;

          o.maxX     = typeof maxX != 'undefined' ? maxX : null;

          o.maxY     = typeof maxY != 'undefined' ? maxY : null;



          o.xMapper = fXMapper ? fXMapper : null;

          o.yMapper = fYMapper ? fYMapper : null;



          o.sanalkurs.onDragStart     = new Function();

          o.sanalkurs.onDragEnd     = new Function();

          o.sanalkurs.onDrag          = new Function();

     },



     start : function(e)

     {

          var o = Drag.obj = this;

          e = Drag.fixE(e);

          var y = parseInt(o.vmode ? o.sanalkurs.style.top  : o.sanalkurs.style.bottom);

          var x = parseInt(o.hmode ? o.sanalkurs.style.left : o.sanalkurs.style.right );

          o.sanalkurs.onDragStart(x, y);



          o.lastMouseX     = e.clientX;

          o.lastMouseY     = e.clientY;



          if (o.hmode) {

               if (o.minX != null)     o.minMouseX     = e.clientX - x + o.minX;

               if (o.maxX != null)     o.maxMouseX     = o.minMouseX + o.maxX - o.minX;

          } else {

               if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;

               if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;

          }



          if (o.vmode) {

               if (o.minY != null)     o.minMouseY     = e.clientY - y + o.minY;

               if (o.maxY != null)     o.maxMouseY     = o.minMouseY + o.maxY - o.minY;

          } else {

               if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;

               if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;

          }



          document.onmousemove     = Drag.drag;

          document.onmouseup          = Drag.end;



          return false;

     },



     drag : function(e)

     {

          e = Drag.fixE(e);

          var o = Drag.obj;



          var ey     = e.clientY;

          var ex     = e.clientX;

          var y = parseInt(o.vmode ? o.sanalkurs.style.top  : o.sanalkurs.style.bottom);

          var x = parseInt(o.hmode ? o.sanalkurs.style.left : o.sanalkurs.style.right );

          var nx, ny;



          if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);

          if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);

          if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);

          if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);



          nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));

          ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));



          if (o.xMapper)          nx = o.xMapper(y)

          else if (o.yMapper)     ny = o.yMapper(x)



          Drag.obj.sanalkurs.style[o.hmode ? "left" : "right"] = nx + "px";

          Drag.obj.sanalkurs.style[o.vmode ? "top" : "bottom"] = ny + "px";

          Drag.obj.lastMouseX     = ex;

          Drag.obj.lastMouseY     = ey;



          Drag.obj.sanalkurs.onDrag(nx, ny);

          return false;

     },



     end : function()

     {

          document.onmousemove = null;

          document.onmouseup   = null;

          Drag.obj.sanalkurs.onDragEnd(     parseInt(Drag.obj.sanalkurs.style[Drag.obj.hmode ? "left" : "right"]), 

                                             parseInt(Drag.obj.sanalkurs.style[Drag.obj.vmode ? "top" : "bottom"]));

          Drag.obj = null;

     },



     fixE : function(e)

     {

          if (typeof e == 'undefined') e = window.event;

          if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;

          if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;

          return e;

     }

};

</script>

<style type="text/css">

     #sanalkurs {

          position:absolute;

          height:300px;

          width:300px;

          background-color:fff;

          border:1px solid #000;

          }



     #handle {

          margin:2px;

          padding:2px;

          width: 98%;

          color:white;

          background-color: Black;

          font-weight: bold;

          }

</style>



Bundan sonra ise vereceğim kodları tagları arasına yazınız.


<div id="sanalkurs" style="center:428px; top:105px;position:absolute; width:181px; height:130px; left:505px">

     <div id="handle" style="width: 176px; height: 23px">

        Sanalkurs.net</div>

        <p align="left"><font color="#FF0000">JavaScript ile Kullanıcının İstediği Alana Sürükleyip 

        Bırakabileceği Bir Duyuru Panosu Yaptık.....</font></p>

        </div>



<script language="javascript">

     var theHandle = document.getElementById("handle");

     var thesanalkurs   = document.getElementById("sanalkurs");

     Drag.init(theHandle, thesanalkurs);

</script>



Evet bu kadar ben duyuru panosu yaptım siz istediğiniz gibi düzenleyip başka şekilde de kullanabilirsiniz.

Kolay gelsin.....
  • Etiketler;
Oğuzhan Tüfekci
Uzun zamandır bilgisayarla iç içe olan Oğuzhan Tüfekci, şu anda freelance olarak çalışıyor. <p>Yazılım geliştirme, grafik tasarım ve web tasarımı üzerine yoğunlaşan yazar, Html, Php, Asp, Asp.NET, Css, Javascript, AutoCAD, C, C++, Visual Basic, Flash, Photoshop, Corel Draw ve Illustrator biliyor.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

ellerinize sağlık bence bu sistemle sanırım puzzle da yapılabilir denedim ve çok hoş durdu sevgilerimle..
teşekkürler dostum.

Yukarı Git