TweetFollow Us on Twitter

A Dashboard Widget that supports Drag-and-Drop

Volume Number: 24
Issue Number: 12
Column Tag: Dashboard Widgets

A Dashboard Widget that supports Drag-and-Drop

How to Drag-and-Drop files and directories between Dashboard Widgets and/or Finder

By Mihalis Tsoukalos


This article is going to show you how to program a well-known Drag-and-Drop technique for Dashboard Widgets.

The idea of the presented Widget is pretty simple. You Drag-and-Drop either a file or a directory from the Finder to the Dashboard Widget. The Widget will then show you the full path of the file or the directory.

The Widget is called DaD and its output can be seen in figure 1.

Figure 1: The DaD Dashboard Widget

The files that compose the Widget

Figure 2 shows the files of the Widget as well as their sizes (in bytes).

Figure 2: The directory structure of the DaD Widget

If you have already read the previous articles about Dashboard Widgets that I have written for MacTech, you should know by now about the Default.png and Icon.png graphic files. If not, please check the Bibliography and References section of this article.

The DaD.html file

The contents of the DaD.html file are the following:

File: DaD.html
Programmer: Mihalis Tsoukalos
Date: Tuesday 06 November 2007
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!– The CSS file for this widget –>
<!– This is a very simple CSS file –>
<style type="text/css">
   @import "DaD.css";
<!– The JavaScript code for this Widget –>
<script type='text/javascript' src='DaD.js' charset='utf-8'/>
   <body ondragenter='dragenter(event);' ondragover='dragover(event);' 
           ondrop='dragdrop(event);' ondragleave='dragleave(event);'>
   <img src="default.png" >
   <div class="Data">
      <div class="PATHoutput">
         <div id="myText">Drop the file or the directory HERE!</div>
         <div id="PATH"></div>

The DaD.html HTML file encapsulates the JavaScript and the CSS files of the Widget as usual but it also declares four events using the following HTML code:

<body ondragenter='dragenter(event);' ondragover='dragover(event);' 
           ondrop='dragdrop(event);' ondragleave='dragleave(event);'>

The DaD.js JavaScript file

The following JavaScript code is used in the DaD.js file:

File: DaD.js
Programmer: Mihalis Tsoukalos
Date: Thursday 08 November 2007
// You must have an event handler for every handler
// that you are going to support.
// This Widget only supports the dragdrop event.
function dragdrop (event)
   var uri = null;
   try {
       uri = event.dataTransfer.getData("text/uri-list");
   } catch (ex)
   // if the acquisition is successful:
   if (uri)
      // Write some text to the output
      document.getElementById("myText").innerText = "The full path is:";
      // And display the file's PATH
      document.getElementById("PATH").innerText = uri;
// Although the following events are not supported
// their handlers must be present and do nothing.
function dragenter(event)
function dragover(event)
function dragleave(event)

The DaD.css file

The DaD.css file contains the following CSS code:

File: DaD.css
Programmer: Mihalis Tsoukalos
Date: Tuesday 06 November 2007
   margin: 0;
   font-weight: bold;
   color: white; 
   padding-top: 4px;
   padding-bottom: 2px;
   text-align: center;
   font: 12px "Lucida Grande";
   font-weight: bold;
   color: white;
   word-wrap: break-word;
   padding-top: 2px;
   padding-bottom: 4px;
   opacity: 1.0;
   position: absolute;
   top: 30px;
   left: 15px;
   color: grey;
   padding-right: 8px;
   padding-left: 8px;
   width: 140px;

The CSS file of the Widget is simple and easily understood.

The Info.plist file of the Widget

The XML version of the Info.plist file is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" 
<plist version="1.0">
   <string>Drag and Drop Widget</string>

As you can see you have to set the AllowFileAccessOutsideOfWidget key to true in order to be able to access files or directories that reside outside the Widget directory. Please note that this can be a security risk.

Explaining the Technique

First, I have to tell you that although the dragover, dragenter and dragleave handlers are not doing anything useful, they must be present in the DaD.js JavaScript file. The only handler that in fact does a useful thing is the dragdrop handler. The dragdrop handler reads the file or the directory name using the event.dataTransfer.getData("text/uri-list") code. Then the data is written to the Widget area and the Widget is ready to accept other input using drag and drop.

As you can see if you try it, you cannot copy the output of the DaD Widget and use it somewhere else. This is going to be corrected in the next article.


The presented Widget implements "dragging and dropping" between the Finder and the Dashboard. The presented technique is not very difficult, yet it is very valuable - especially when combined with the "Copy and Paste" practice.

Disclaimer: Please note that the presented Widget is based on the Dropper example Widget from Apple. The Dropper Widget is available if you install the Tiger Developer Tools but it is not available in a Leopard Mac OS X system.

Bibliography and References

Dashboard sample code (from Apple developer site):

Apple Dashboard Page:

Debugging Dashboard Widgets (from Apple developer site):

"Programming Dashboard Widgets" eBook by Mihalis Tsoukalos. You can find more information about the book at You can buy it at:

"Creating Widgets with Dashcode", Mihalis Tsoukalos, August 2008, MacTech

Mihalis Tsoukalos lives in Greece with his wife Eugenia and enjoys digital photography and writing articles. He is the author of the "Programming Dashboard Widgets" eBook. You can reach him at


Community Search:
MacTech Search:

Software Updates via MacUpdate

Adobe Acrobat Reader 15.009.20069 - View...
Adobe Acrobat Reader allows users to view PDF documents. You may not know what a PDF file is, but you've probably come across one at some point. PDF files are used by companies and even the IRS to... Read more
Adobe Acrobat Pro 15.009.20069 - Powerfu...
Acrobat Pro DC is available only as a part of Adobe Creative Cloud, and can only be installed and/or updated through Adobe's Creative Cloud app. Adobe Acrobat Pro DC with Adobe Document Cloud... Read more
Path Finder 7.2 - Powerful, award-winnin...
Become a master of file management with Path Finder. Take full control over your file system. Save your time: compare and synchronize folders, view hidden files, use Dual Pane and full keyboard... Read more
Sid Meier's Civilization: Beyond Ea...
Sid Meier's Civilization: Beyond Earth is a new science-fiction-themed entry into the award-winning Civilization series. Set in the future, global events have destabilized the world leading to a... Read more
ForkLift 2.6.6 - Powerful file manager:...
ForkLift is a powerful file manager and ferociously fast FTP client clothed in a clean and versatile UI that offers the combination of absolute simplicity and raw power expected from a well-executed... Read more
Microsoft Remote Desktop 8.0.21 - Connec...
With Microsoft Remote Desktop, you can connect to a remote PC and your work resources from almost anywhere. Experience the power of Windows with RemoteFX in a Remote Desktop client designed to help... Read more
OnyX 3.1.0 - Maintenance and optimizatio...
OnyX is a multifunctional utility for OS X. It allows you to verify the startup disk and the structure of its System files, to run miscellaneous tasks of system maintenance, to configure the hidden... Read more
Spotify - Stream music, crea...
Spotify is a streaming music service that gives you on-demand access to millions of songs. Whether you like driving rock, silky R&B, or grandiose classical music, Spotify's massive catalogue puts... Read more
ExpanDrive - Access cloud storag...
ExpanDrive builds cloud storage in every application, acts just like a USB drive plugged into your Mac. With ExpanDrive, you can securely access any remote file server directly from the Finder or... Read more
Markly 1.5.3 - Create measurement and de...
Markly is a measurement and design-spec plugin/extension for Photoshop and Sketch. It is made for modern Web designers and app front-end developers. You can add specification marks simply by clicking... Read more

Balls & Holes - Tips and tricks to h...
Balls & Holes is a gorgeous new endless runner that challenges you to make it as far up a mountain as possible before inevitably being sliced into a load of gooey bits. Making this task more difficult are both the wide variety of balls that... | Read more »
Balloony Land offers a fresh twist on th...
Balloony Land by Palringo offers a fresh twist on the match three genre and is out now on iOS and Android. First-off, you'll be popping balloons instead of crushing candy and the balloons will float up and fill the empty spaces instead of dropping... | Read more »
Graphic - vector illustration and design...
Graphic - vector illustration and design 1.0 Device: iOS iPhone Category: Productivity Price: $2.99, Version: 1.0 (iTunes) Description: Autodesk Graphic is a powerful full-featured vector drawing and illustration application right in... | Read more »
Sago Mini Babies (Education)
Sago Mini Babies 1.0 Device: iOS Universal Category: Education Price: $2.99, Version: 1.0 (iTunes) Description: Introducing the Sago Mini babies. Boys and girls love caring for these adorable characters. Feed Robin her favorite mush... | Read more »
PAUSE - Relaxation at your fingertip (H...
PAUSE - Relaxation at your fingertip 1.1 Device: iOS iPhone Category: Healthcare & Fitness Price: $1.99, Version: 1.1 (iTunes) Description: | Read more »
Super Sharp (Games)
Super Sharp 1.1 Device: iOS Universal Category: Games Price: $1.99, Version: 1.1 (iTunes) Description: Your finger has never been so sharp! Cut with skill to complete the 120 ingenious physics levels of Super Sharp and become a cut... | Read more »
Assembly - Graphic design for everyone...
Assembly - Graphic design for everyone 1.0 Device: iOS Universal Category: Photography Price: $2.99, Version: 1.0 (iTunes) Description: Assembly is the easiest most powerful design tool on the App Store. Create anything you can... | Read more »
Dub Dash (Games)
Dub Dash 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: ARE YOU READY FOR THE ULTIMATE CHALLENGE? UNIQUE SYMBIOSIS OF MUSIC AND GRAPHICS | Read more »
Leave Me Alone (Games)
Leave Me Alone 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: 33% off launch sale!!! Somewhere between the 1980s and 1990s there exists a world that never was. A world of skatepunks,... | Read more »
YAMGUN (Games)
YAMGUN 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: The invasion has begun! Protect the walls of the citadel against waves of enemies! But watch out, you will soon run out of ammo...... | Read more »

Price Scanner via

Apple Products Four Of 2015′s Top Ten Most Wa..., Future’s global technology brand and the UK’s biggest technology website, has unveiled results from extensive research that show • The Smart Home is what excites the public most about... Read more
13-inch 2.7GHz/128GB Retina MacBook Pro on sa...
Best Buy has the 13″ 2.7GHz/128GB Retina MacBook Pro on sale for $1174.99 for a limited time. Choose free shipping or free local store pickup (if available). Sale price for online orders only, in-... Read more
App Tamer 2.1 Makes El Capitan Cooler, Quiete...
St. Clair Software has announced the availability of a free update to its App Tamer utility for Mac OS X. App Tamer 2.1 delivers compatibility with Yosemite and improves its support for a number of... Read more
15-inch Retina MacBook Pros on sale for up to...
B&H Photo has 2015 15″ Retina MacBook Pros on sale for up to $160 off MSRP including free shipping plus NY sales tax only: - 15″ 2.2GHz Retina MacBook Pro: $1849.99 $150 off - 15″ 2.5GHz Retina... Read more
12-inch Retina MacBooks on sale for $100 off...
Best Buy has 12″ Retina MacBooks available for $100 off MSRP on their online store. Choose free shipping or free local store pickup (if available). Discounted prices available for online orders only... Read more
MacBook Airs on sale for up to $100 off MSRP
Save up to $100 on the purchase of a new 2015 13″ or 11″ 1.6GHz MacBook Air at the following resellers. Shipping is free with each model: 11" 128GB MSRP $899 11" 256GB... Read more
Save 15% with Apple refurbished Mac Pros
The Apple Store has Apple Certified Refurbished Mac Pros available for up to $600 off the cost of new models. An Apple one-year warranty is included with each Mac Pro, and shipping is free. The... Read more
Apple restocks refurbished Mac minis for up t...
Apple has restocked Certified Refurbished 2014 Mac minis, with models available starting at $419. Apple’s one-year warranty is included with each mini, and shipping is free: - 1.4GHz Mac mini: $419 $... Read more
TP-LINK Next-Gen Routers Support a Large Numb...
TP-LINK, specialists in consumer and business networking products, have announced the availability of Archer C2600, the company’s next-generation router featuring wireless AC, multi-user MIMO, and 4-... Read more
Apple refurbished 2014 MacBook Airs available...
Apple has Certified Refurbished 2014 MacBook Airs available starting at $679. An Apple one-year warranty is included with each MacBook, and shipping is free: - 11″ 1.4GHz/128GB MacBook Air: $679... Read more

Jobs Board

Project Manager: *Apple* Pay - Apple (Unite...
…The iOS Systems team is looking for a project manager who will manage Apple Pay server side integration project resources in a matrix organization, track tasks, prepare Read more
*Apple* Retail - Multiple Positions (US) - A...
Job Description:SalesSpecialist - Retail Customer Service and SalesTransform Apple Store visitors into loyal Apple customers. When customers enter the store, you're Read more
Validation Engineering Manager - *Apple* Wa...
…hardware and software development to lead the validation of the next generation Apple Watch and related products. The Validation Team works closely with many Read more
Senior Payments Architect - *Apple* Pay - A...
**Job Summary** Apple , Inc. is looking for a highly motivated, innovative and hands-on senior payments architect to join the Apple Pay Engineering team. You will Read more
*Apple* Retail for Business Support Supervis...
…is looking for a motivated, outgoing, and creative individual who wants to offer Apple Business Customers an unparalleled customer experience. The Apple Retail for Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.