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;
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