{"id":324,"date":"2018-04-22T17:12:49","date_gmt":"2018-04-22T14:12:49","guid":{"rendered":"http:\/\/blog.okanacar.com.tr\/?p=324"},"modified":"2021-01-16T22:39:19","modified_gmt":"2021-01-16T19:39:19","slug":"html5te-surukle-birak-drag-drop","status":"publish","type":"post","link":"https:\/\/okanacar.com.tr\/blog\/?p=324","title":{"rendered":"HTML5&#8217;te S\u00fcr\u00fckle B\u0131rak (Drag &#038; Drop)"},"content":{"rendered":"\n<p>HTML5&#8217;te, herhangi bir eleman i\u00e7in ekran\u0131n bir yerine s\u00fcr\u00fckleme i\u015flemi uygulanabilir ayr\u0131ca native bir s\u00fcr\u00fckle-b\u0131rak API&#8217;\u0131n\u0131 hizmete sunmaktad\u0131r.<\/p>\n\n\n\n<p>S\u00fcr\u00fckle-b\u0131rak i\u015flemi ile ili\u015fkili en \u00e7ok kullan\u0131lan olaylar a\u015fa\u011f\u0131da listelenmi\u015ftir:<\/p>\n\n\n\n<ul><li><strong>ondragstart:<\/strong>&nbsp;Kullan\u0131c\u0131 bir nesneyi s\u00fcr\u00fcklemeye ba\u015flad\u0131\u011f\u0131 anda olu\u015fur.<\/li><li><strong>ondragenter:<\/strong>&nbsp;S\u00fcr\u00fckleme olu\u015furken, farenin hedef eleman\u0131n \u00fczerine hareket ettirilmesiyle olu\u015fur.<\/li><li><strong>ondragover:<\/strong>&nbsp;S\u00fcr\u00fckleme meydana geldi\u011fi zaman farenin bir eleman\u0131n \u00fczerine hareket ettirilmesiyle tetiklenen olayd\u0131r.<\/li><li><strong>ondrag:<\/strong>&nbsp;Nesne s\u00fcr\u00fcklenirken fare&nbsp;hareket ettirildi\u011fi s\u00fcrece olu\u015fan olayd\u0131r.<\/li><li><strong>ondragleave:<\/strong>&nbsp;Bir s\u00fcr\u00fcklenme olu\u015furken farenin bir eleman\u0131 b\u0131rakmas\u0131yla olu\u015fur.<\/li><li><strong>ondrop:<\/strong>&nbsp;S\u00fcr\u00fckleme sonunda, b\u0131rak i\u015flemi olu\u015ftu\u011fu zaman tetiklenir.<\/li><li><strong>ondragend:<\/strong>&nbsp;S\u00fcr\u00fckleme esnas\u0131nda kullan\u0131c\u0131 farenin&nbsp;d\u00fc\u011fmesini b\u0131rak\u0131nca olu\u015fur.<\/li><\/ul>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod par\u00e7as\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra, fare yard\u0131m\u0131yla mor renkli ve \u00fczerinde &#8220;S\u00fcr\u00fckle&#8221; yazan dikd\u00f6rtgeni s\u00fcr\u00fckleyerek hareket ettirelim; fare b\u0131rak\u0131l\u0131nca nesne eski konumuna d\u00f6necek.<\/p>\n\n\n\n<pre class=\"wp-block-code lang:default decode:true\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE HTML&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;style type=\"text\/css\"&gt;\n            #KUTU1, #KUTU2 {\n                float:left;padding:10px;margin:10px; -moz-user-select:none;\n            }\n        #KUTU1 { background-color: #6633EF; width:85px; height:85px;  }\n        #KUTU2 { background-color: #FF6699; width:160px; height:170px; }\n            &lt;\/style&gt;\n        &lt;script type=\"text\/javascript\"&gt;\n            function dragStart(ev) {\n                ev.dataTransfer.effectAllowed='move';\n                ev.dataTransfer.setData(\"Text\", ev.target.getAttribute('id'));\n                ev.dataTransfer.setDragImage(ev.target,0,0);\n                return true;\n            }\n        &lt;\/script&gt;\n    &lt;\/head&gt;\n\n    &lt;body&gt;\n        &lt;center&gt;\n            &lt;h2&gt;SURUKLE BIRAK-HTML5&lt;\/h2&gt;\n            &lt;div&gt;UYGULA&lt;\/div&gt;\n            &lt;div id=\"KUTU1\" draggable=\"true\"\n                ondragstart=\"return dragStart(event)\"&gt;\n                &lt;p&gt;SURUKLE&lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div id=\"KUTU2\"&gt;&lt;\/div&gt;\n        &lt;\/center&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"822\" height=\"294\" src=\"http:\/\/blog.okanacar.com.tr\/wp-content\/uploads\/2018\/04\/surukle-birak-1.png\" alt=\"\" class=\"wp-image-325\" srcset=\"https:\/\/okanacar.com.tr\/blog\/wp-content\/uploads\/2018\/04\/surukle-birak-1.png 822w, https:\/\/okanacar.com.tr\/blog\/wp-content\/uploads\/2018\/04\/surukle-birak-1-600x215.png 600w, https:\/\/okanacar.com.tr\/blog\/wp-content\/uploads\/2018\/04\/surukle-birak-1-768x275.png 768w\" sizes=\"(max-width: 822px) 100vw, 822px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u0130\u015flem ad\u0131mlar\u0131<\/h3>\n\n\n\n<p>\u0130lk ad\u0131mda ilgili eleman\u0131 s\u00fcr\u00fcklenebilir (draggable) hale getirmelisiniz. Bu ama\u00e7la a\u015fa\u011f\u0131daki ifadeyi kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code lang:default decode:true\"><code lang=\"markup\" class=\"language-markup\">&lt;img draggable=\"true\"&gt;<\/code><\/pre>\n\n\n\n<p>Bir sonraki ad\u0131m, eleman s\u00fcr\u00fcklenirken ne yap\u0131laca\u011f\u0131n\u0131 tan\u0131mlamakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code lang:default decode:true\"><code lang=\"markup\" class=\"language-markup\">&lt;img id=\"surukle_nesne\" src=\"xx.png\" draggable=\"true\" ondragstart=\"drag(event)\"&gt;<\/code><\/pre>\n\n\n\n<p>Bir sonraki ad\u0131mda ise veri tipi ve s\u00fcr\u00fcklenecek eleman\u0131n id&#8217;si tan\u0131mlanmal\u0131d\u0131r. Bu \u00f6rnekte veri tipi &#8220;text&#8221; ve s\u00fcr\u00fcklenecek eleman id&#8217;si &#8220;surukle_nesne&#8221; dir:<\/p>\n\n\n\n<pre class=\"wp-block-code lang:default decode:true\"><code lang=\"javascript\" class=\"language-javascript\">function drag(event)\n{\n     event.dataTransfer.setData(\"Text\",event.target.id);\n}<\/code><\/pre>\n\n\n\n<p><strong>ondragover<\/strong>&nbsp;olay\u0131, s\u00fcr\u00fcklenen nesnenin nerede b\u0131rak\u0131laca\u011f\u0131n\u0131 belirler. B\u00f6ylece&nbsp;<strong>ondragover<\/strong>&nbsp;olay\u0131 i\u00e7in bir&nbsp;<strong>eventListener<\/strong>&nbsp;eklemeniz gerekir:<\/p>\n\n\n\n<pre class=\"wp-block-code lang:default decode:true\"><code lang=\"javascript\" class=\"language-javascript\">function allowDrop(event)\n{\n    event.preventDefault();\n}<\/code><\/pre>\n\n\n\n<p>B\u0131rak (drop) olay\u0131n\u0131n kabul edilmesi i\u00e7in, &#8220;b\u0131rak&#8221; hedefi, &#8220;b\u0131rak&#8221; olay\u0131n\u0131 dinlemelidir; o nedenle bir&nbsp;<strong>ondrop=&#8221;drop(event)&#8221;<\/strong>&nbsp;komutu da eklenmelidir:<\/p>\n\n\n\n<pre class=\"wp-block-code lang:default decode:true\"><code lang=\"markup\" class=\"language-markup\">&lt;div id=\"divMain\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Sonu\u00e7 olarak s\u00fcr\u00fcklenen eleman b\u0131rak eleman\u0131na eklenecektir.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML5&#8217;te, herhangi bir eleman i\u00e7in ekran\u0131n bir yerine s\u00fcr\u00fckleme i\u015flemi uygulanabilir ayr\u0131ca native bir s\u00fcr\u00fckle-b\u0131rak API&#8217;\u0131n\u0131 hizmete sunmaktad\u0131r. S\u00fcr\u00fckle-b\u0131rak i\u015flemi ile ili\u015fkili en \u00e7ok kullan\u0131lan olaylar a\u015fa\u011f\u0131da listelenmi\u015ftir: ondragstart:&nbsp;Kullan\u0131c\u0131 bir nesneyi s\u00fcr\u00fcklemeye ba\u015flad\u0131\u011f\u0131 anda olu\u015fur.ondragenter:&nbsp;S\u00fcr\u00fckleme olu\u015furken, farenin hedef eleman\u0131n \u00fczerine hareket ettirilmesiyle olu\u015fur.ondragover:&nbsp;S\u00fcr\u00fckleme meydana geldi\u011fi zaman farenin bir eleman\u0131n \u00fczerine hareket ettirilmesiyle tetiklenen olayd\u0131r.ondrag:&nbsp;Nesne s\u00fcr\u00fcklenirken &hellip;<\/p>\n","protected":false},"author":1,"featured_media":326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/324"}],"collection":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=324"}],"version-history":[{"count":2,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/324\/revisions"}],"predecessor-version":[{"id":2360,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/324\/revisions\/2360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/media\/326"}],"wp:attachment":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}