MyDesign | Kod Arşivi - Anasayfaya Dön   No banner in farm
Anasayfa Araştır Forum Gelişmiş Arama Siteniz İçin En Hit İçerikler RSS İçerik Ekle Scriptler Destekleyenler Kadromuz Reklam İletişim Giriş Sayfası Yap  Sık Kullanılanlara Ekle
Bu Kategorinin En Yeni Kodları:


Bu Kategorinin En Çok Görüntülenen Kodları:






Arama:
Gelişmiş Arama


No banner in farm



En Çok Görüntülenen Kodlar:


Üye Girişi:
 Üye Ol



Anasayfa > JavaScript > Kodlar

Sürükle / Bırak

Sayfa içindeki istediğiniz elementin (resim, kutu vs..) başka yerlere sürükle / bırak yöntemiyle baka yerlere taşınmasını sağlayan kod

Drag  Drop  Sürükle  Bırak 

Kategori : JavaScript
Gönderen : mYavuz
Telif : Dynamic Drive
Tarih : 28 Aralık 2006
Örnek Dosya : İndir
Okunma Sayısı : 13312
Puan
: 7,6 / 10 (9 Oy)
Puan Verin :
Google Bookmarks  del.icio.us  Digg  Yahoo! MyWeb  Windows Live  Furl
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Sürükle / Bırak Örneği - mydesign.gen.tr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<script type="text/javascript">
/*************************************************
 * dom-drag.js
 * www.youngpup.net
 * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 
 **************************************************
 */

var Drag = {

     obj : null,

     init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
     {
          o.onmousedown     = Drag.start;

          o.hmode               = bSwapHorzRef ? false : true ;
          o.vmode               = bSwapVertRef ? false : true ;

          o.root = oRoot && oRoot != null ? oRoot : o ;

          if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
          if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
          if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
          if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.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.root.onDragStart     = new Function();
          o.root.onDragEnd     = new Function();
          o.root.onDrag          = new Function();
     },

     start : function(e)
     {
          var o = Drag.obj = this;
          e = Drag.fixE(e);
          var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
          var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
          o.root.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.root.style.top  : o.root.style.bottom);
          var x = parseInt(o.hmode ? o.root.style.left : o.root.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.root.style[o.hmode ? "left" : "right"] = nx + "px";
          Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
          Drag.obj.lastMouseX     = ex;
          Drag.obj.lastMouseY     = ey;

          Drag.obj.root.onDrag(nx, ny);
          return false;
     },

     end : function()
     {
          document.onmousemove = null;
          document.onmouseup   = null;
          Drag.obj.root.onDragEnd(     parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
                                             parseInt(Drag.obj.root.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">
     #root {
          position:absolute;
          height:300px;
          width:300px;
          background-color:#F4F4F4;
          border:1px solid #333;
          }

     #handle {
          margin:2px;
          padding:2px;
          width: 98%;
          color:white;
          background-color: navy;
          font-weight: bold;
          }
</style>
</head>

<body>

<div id="root" style="left:50px; top:100px;">
     <div id="handle">Başlık</div>
     Metin
</div>

<script language="javascript">
     var theHandle = document.getElementById("handle");
     var theRoot   = document.getElementById("root");
     Drag.init(theHandle, theRoot);
</script>

</body>
</html>
 
 

Sürükle / Bırak için yazılan yorumlar

ruşen  { 09 Şubat 2011 }
peki ikinci bir kutuyu nasıl ekleyeceğiz aynı kodu tekrar kopyaladığımızda sürükle bırak özelliği kayboluyor

ruşen  { 09 Şubat 2011 }
peki ikinci bir kutuyu nasıl ekleyeceğiz aynı kodu tekrar kopyaladığımızda sürükle bırak özelliği kayboluyor

Yorum ekleyin

Anasayfa > JavaScript > Kodlar > Sürükle / Bırak
Kategoriler:


Forum:



Bağlantılar:


En Son Yorumlanan İçerikler:


Murat Yavuz | Site Haritası | Gizlilik Bildirimi | 54.159.30.26 | 0,11 Saniye
© Copyright 2004-2018 MyDesign | Kod Arşivi. Tüm Hakları Saklıdır.
MyDesign | Kod Arşivi, en iyi görünüm için, 1024x768 ve üzeri çözünürlük tavsiye eder.