Exmaple-1

दोस्तों आज में एक जावास्क्रिप्ट ट्रिक के बारे में बताने जा रहा हु जिसके जरिये आप अपने ब्लॉग या वेबसाइट के कंटेंट, फोटो, एच टी एम एल टेबल, या ब्लॉगर की प्रविष्टीयो को उठा कर कही भी रख सकते हैं.........

वैसे ये dragable जावास्क्रिप्ट कोड बड़ी ही आसानी से आपको मिल जायगा लेकिन इन्हे ब्लॉगर में इस्तेमाल करना बड़ी टेडी खीर होता हैं। इसमे कई दिक्कत आती हैं जैसे की कहा पे हम अपने कोड को लगाये और इसे कहा चलाये.

नीचे दिया गया उदहारण देखे :- नीचे दिए गए फोटो को आप उठाये और कही भी रखे.

कुछ ऐसे ही उदहारण नीचे दिए गए कोड बॉक्स में दिखाए गए हैं इन्हे देखने के लिए Demo of this वाले बटन पर क्लिक करे :-

<html> <head> <script src='http://funtooshworld.vndv.com/apexlerning/dom-drag.js' type='text/javascript'></script> </head> <body> नीचे दिए गए फोटो को आप उठाये और कही भी रखे.<img id="example1" src="http://hindi.masti.googlepages.com/cool.gif" style="position: relative; cursor: move;"><script type="text/javascript">Drag.init(document.getElementById("example1"));</script>ये रहा एक और दूसरा एच टी एम एल टेबल का उदहारण:-<table id="example2" style="border: 3px solid ; position: relative; cursor: move;"><tbody><tr><td style="color: rgb(255, 0, 0);">पहला बॉक्स</td><td style="color: rgb(255, 0, 0);">दूसरा बॉक्स</td><td style="color: rgb(255, 0, 0);">तीसरा बॉक्स</td></tr><tr><td style="color: rgb(51, 204, 0);">चौथा बॉक्स</td><td style="color: rgb(51, 204, 0);">पाचवा बॉक्स</td><td style="color: rgb(51, 204, 0);">छटा बॉक्स</td></tr><tr><td style="color: rgb(153, 0, 0);">सातवा बॉक्स</td><td style="color: rgb(153, 0, 0);">आठवा बॉक्स</td><td style="color: rgb(153, 0, 0);">नौवा बॉक्स</td></tr></tbody></table><script type="text/javascript">Drag.init(document.getElementById("example2"));</script> ये रहा एक फॉर्म का उदहारण :- <form id="example3" name="Code1" style="border: medium double ; background-color: rgb(204, 153, 102); font-weight: bold; position: relative; cursor: move;"> <a href="javascript:alert('Dragable%20Example.')" target="_self">Help</a> <textarea name="area" wrap="logical" orows="21" ocols="42" onkeypress="return taLimit(this)" onkeyup="return taCount(this,'myCounter')" style="border-style: groove; background-color: rgb(204, 153, 102); color: white; width: 350px; height: 150px;">Drag And Drop this form anywhere on this site.</textarea> </form> <script type="text/javascript">Drag.init(document.getElementById("example3"));</script> </body></html>

कैसा लगा आपको इन उदहारणओ को देख कर....
अब आपको भी लग रहा होगा की ऐसा ही कुछ आपके चिट्ठे या वेबसाइट पर भी होना चाहिए :---------

चलिए शुरुवात करते हैं इसके जावास्क्रिप्ट कोड से :-
सबसे पहले आप नीचे दिए गए कोड को देखे और इसे कॉपी करके अपने ब्लॉग या वेबसाइट के ठीक </HEAD> के ठीक उपर पेस्ट कर दे जैसा की नीचे दिखाया गया हैं :-

बस इस उपर दिए गए जावास्क्रिप्ट कोड को अपने ब्लॉग या वेबसाइट के head वाले भाग में इंस्टाल या कॉपी पेस्ट कर दे।

उसके बाद आपको जो भी फोटो, टेबल, फॉर्म, या कुछ भी पर अपना ये कोड इस्तेमाल करना हैं तो नीचे दिए गए निर्देशों को ध्यान से देखे :-

<img> id="Your Id" src="http://hindi.masti.googlepages.com/cool.gif" style="position: relative; cursor: move; ">
<script type="text/javascript">
Drag.init(document.getElementById("Your Id"));
<script>

जैसा की उपर लाल रंग में दिखाया गया हैं, id="Your Id" इस Your Id की जगह पे आप अपनी कोई सी भी Id लगा सकते हैं
जो की स्वचालित रूप से या automatically आपके उस html object को ढूंड या find कर लेगा
जिसपे आपने इस जावास्क्रिप्ट कोड को लगाना हैं।

और style="position: relative; cursor: move; वाली CSS की प्रोपर्टी को भी उस html object पे लगाना जरूरी हैं.

इसे एक उदहारण से समझते हैं :-
<img> id="drag1" src="http://hindi.masti.googlepages.com/cool.gif" style="position: relative; cursor: move; ">
<script type="text/javascript">
Drag.init(document.getElementById("drag1"));
<script>

लीजिये तैयार हैं आपका ऐसी फोटो या टेबल जिसे कोई भी कही भी उठा के रख सकता हैं।
आपको ये ट्रिक कैसी लगी ?
हमें जरूर बताये.

About Author :