Drag and Drop is one of those interactions that can really help to make an interface simple to use. There are plenty of JavaScript libraries that can be used to create drag and drop interfaces but what many people don’t know is that all of the major browsers actually have native support for drag and drop.

In this blog post you are going to learn how to make use of the native Drag and Drop API in order to create your own Drag and Drop interfaces.

Making Elements Draggable

To get us started we are first going to take a look at how to make HTML elements draggable. This is done using the draggable attribute.

Setting the value of the draggable attribute to true informs the browser that this element can be dragged.

<div draggable="true">Draggable Div</div>

Note: Some elements such as <a> and <img> are draggable by default in many browsers. It’s best to explicitly add a draggable attribute just to be safe though.

Listening for Drag Events

There are a number of events that are fired during a drag interaction. Some of these events are fired on the element that is being dragged and others are fired on elements on the page that serve as drop targets.

• dragstart – This event is fired on an element when it starts to be dragged by the user. It is not fired when dragging a file into the browser from the file system.
• drag – This event is continuously fired on the element being dragged during the interaction.
• dragenter – This event is fired when the dragged element enters a target element. The event listener should be setup on the target.
• dragleave – This event is fired when the dragged element leaves the target element.
• dragover – This event is continuously fired whilst the dragged element is over the target element.
• drop – This event is fired when the dragged element or file is dropped.
• dragend – This event is fired once the drag interaction has completed. It applies to the element that was dragged.

Note: Mouse events (such as mousemove) are not fired during a drag and drop interaction.

You can use a simple event listener to execute some code when one of these events is fired. For example the following would print out the text ‘Drag Interaction Started!’ to the console when the user initiated a drag interaction.

draggableElement.addEventListener('dragstart', function(e) {
      console.log('Drag Interaction Started!');
    });

The DataTransfer Object

When a drag interaction is initiated a DataTransfer object is created that is associated with the interaction. This object is used to store information about the drag interaction as well as data items.

Lets take a look at some of the properties and methods that the DataTransfer object has.

• dropEffect – The type of drag and drop interaction. This determines which cursor the browser should display during the interaction. Possibly values are: copy, move, link and none.
• effectAllowed – Specifies which types are allowed for this interaction. Possibly values are: copy, move, link, copyLink, copyMove, linkMove, all, none and uninitialized (the default, treated the same as all).
• files – A FileList containing File objects associated with this drag. This property comes in handy when dragging files into the browser.
• types – A list of format types for the data stored in the DataTransfer object.
• setData(format, data) – This method is used to store some data within the DataTransfer object. The format string should be used to specify the format of the data being stored (i.e. ‘text’, ‘url’, ‘text/html’).
• getData(format) – This method is used to retrieve data from the DataTransfer object.
• clearData(format) – This method is used to clear out data stored in the DataTransfer object. Specifying the optional format parameter will only delete data that matches that format, otherwise all data will be deleted.
• setDragImage(imgElement, x, y) – This method is used to specify a custom image that should be displayed when the element is being dragged. By default, many browsers will just display a semi-transparent version of the source element. You should pass in an img element (not a path to an image) as well as x and y parameters that specify the position of the image relative to the mouse cursor.

The dataTransfer object is accessible on the event that is passed into your event listener function blocks. For example:

draggableElement.addEventListener('dragstart', function(event) {
      event.dataTransfer.setData('text', 'Hello World!');
    });

Drag and Drop with Page Elements

Drag and Drop with Elements

Now that you have some knowledge about the Drag and Drop API lets take a look at an example. Here we are going to keep things relatively simple and just focus on moving page elements, later you’ll learn how to drag files into the browser.

See The Demo Download The Code

First we need to write a bit of HTML that includes some draggable elements and a <div> element that will act as our drop target.

<ul id="drag-elements">
      <li draggable="true">Element One</li>
      <li draggable="true">Element Two</li>
      <li draggable="true">Element Three</li>
      <li draggable="true">Element Four</li>
      <li draggable="true">Element Five</li>
    </ul>
    
    <div id="drop-target-one">
      Drop Here!
    </div>

Now that the HTML is setup we need to switch over to a JavaScript file and start writing some code to handle the Drag and Drop interaction.

Lets start by creating some variables and initializing them with the elements in our markup. The elementDragged variable will be used to track which of the elements is currently being dragged (this will come in handy later).

// Get the div element that will serve as the drop target.
    var dropZoneOne = document.querySelector('#drop-target-one');
    
    // Get the draggable elements.
    var dragElements = document.querySelectorAll('#drag-elements li');
    
    // Track the element that is being dragged.
    var elementDragged = null;

The next thing to do is to setup event listeners for when the drag interaction starts and ends. These event listeners should be applied to each of the draggable elements so I’ve setup a for loop that will cycle through all of the elements stored in the dragElements variable.

When the dragstart event is fired we need to set the value of the effectAllowed property to move. We are also going to store the text content of the dragged element within our dataTransfer object. Finally we’ll set the elementDragged variable that we created earlier to the element that is being dragged.

For the dragend event we just need to do a little cleanup and set the elementDragged variable back to null.

for (var i = 0; i < dragElements.length; i++) {
    
      // Event Listener for when the drag interaction starts.
      dragElements[i].addEventListener('dragstart', function(e) {
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text', this.innerHTML);
        elementDragged = this;
      });
    
      // Event Listener for when the drag interaction finishes.
      dragElements[i].addEventListener('dragend', function(e) {
        elementDragged = null;
      });
    
    };

Next we need to create an event listener that will fire when the element is dragged over the drop target. This should set the dropEffect property of the dataTransfer object to move, prompting the browser to update the cursor style.

Make sure to setup this event listener outside of the for loop used previously, and using the dropZoneOne variable.

// Event Listener for when the dragged element is over the drop zone.
    dropZoneOne.addEventListener('dragover', function(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
    
      e.dataTransfer.dropEffect = 'move';
    
      return false;
    });

Note: Calling e.preventDefault() and e.stopPropagation() (used later in this post) just stops the browser from executing any default behaviour that might mess with our drag interaction.

It would be nice if the styling of the drop zone changed when the element was dragged over it. To do this we need to apply a class to the drop target when the dragenter event is fired and then remove this class when dragleave is fired.

Note: We use dragenter and dragleave rather than dragover because dragover is called continuously whilst this element is over the target. dragenter and dragleave are only called once each. It’s best to minimize the amount of work the browser has to do wherever possible.

// Event Listener for when the dragged element enters the drop zone.
    dropZoneOne.addEventListener('dragenter', function(e) {
      this.className = "over";
    });
    
    // Event Listener for when the dragged element leaves the drop zone.
    dropZoneOne.addEventListener('dragleave', function(e) {
      this.className = "";
    });

The final event listener we need to setup is for the drop event. When this is fired we need to do a few things. First we need to remove the over class from the drop target. We then need to retrieve the data that we stored in the dataTransfer object and use it to update the text displayed in the drop target. Finally we need to remove the dragged element from the DOM.

// Event Listener for when the dragged element dropped in the drop zone.
    dropZoneOne.addEventListener('drop', function(e) {
      if (e.preventDefault) e.preventDefault(); 
      if (e.stopPropagation) e.stopPropagation();
    
      this.className = "";
      this.innerHTML = "Dropped " + e.dataTransfer.getData('text');
    
      // Remove the element from the list.
      document.querySelector('#drag-elements').removeChild(elementDragged);
    
      return false;
    });

If you’ve been coding along you should now have a working Drag and Drop UI!

For those that haven’t, you can always check out the live demo.

See the Demo

Drag and Drop with Files

Drag and Drop with Files

Now that you’re feeling a bit more confident with the Drag and Drop API lets take a look at an example that is a little more complex.

In this section you are going to learn how to drag a text file into the browser, read the contents of that file and the display the contents on the page.

To get started we first need to write some HTML. This time we just need a drop target and a <pre> element that will be used to display the contents of the file.

<div id="dd-files">Drop a .txt file here</div>
    <pre id="file-content"></pre>

As we did before, lets start the JavaScript code by getting references to the two elements in our markup.

var dropZoneTwo = document.querySelector('#dd-files');
    var fileContentPane = document.querySelector('#file-content');

Next we need to setup an event listener that will set the dropEffect to copy when the file is dragged over the drop target.

Note: The dragstart event is not fired when dragging a file into the browser.

// Event Listener for when the dragged file is over the drop zone.
    dropZoneTwo.addEventListener('dragover', function(e) {
      if (e.preventDefault) e.preventDefault(); 
      if (e.stopPropagation) e.stopPropagation();
    
      e.dataTransfer.dropEffect = 'copy';
    });

Now we need to setup an event listener for dragenter that will add a class to the drop target when the file enters the element. We also need an event listener for dragleave to remove that class when the dragged file leaves.

// Event Listener for when the dragged file enters the drop zone.
    dropZoneTwo.addEventListener('dragenter', function(e) {
      this.className = "over";
    });
    
    // Event Listener for when the dragged file leaves the drop zone.
    dropZoneTwo.addEventListener('dragleave', function(e) {
      this.className = "";
    });

When the file is dropped in the target element we need to remove the class, read the file and then display the file’s contents on the screen.

We can access the file by taking a look at the dataTransfer object’s files property.

First we use an if statement to check that there are files associated with this drag interaction. Then we retrieve the first file and pass this to the readTextFile function that we will write next.

// Event Listener for when the dragged file dropped in the drop zone.
    dropZoneTwo.addEventListener('drop', function(e) {
      if (e.preventDefault) e.preventDefault(); 
      if (e.stopPropagation) e.stopPropagation();
    
      this.className = "";
    
      var fileList = e.dataTransfer.files;
    
      if (fileList.length > 0) {
        readTextFile(fileList[0]);
      }
    });

The final piece of the puzzle is the readTextFile function. This is responsible for reading the contents of a file and adding it to the <pre> element in your markup.

If you haven’t dealt with the FileReader API before the following code may look a bit alien.

First we create a new instance of FileReader (reader) and then define a callback that should be executed when the file has loaded. Inside this callback we first examine the event to check if the FileReader is done. If it is, we get the content from reader.result and update the innerHTML property of the fileContentPane to include the file name and content.

Now that we have the callback sorted we just have to pass the file that was dragged into the browser to the reader.readAsBinaryString() function.

// Read the contents of a file.
    function readTextFile(file) {
      var reader = new FileReader();
    
      reader.onloadend = function(e) {
        if (e.target.readyState == FileReader.DONE) {
          var content = reader.result;
          fileContentPane.innerHTML = "File: " + file.name + "\n\n" + content;
        }
      }
    
      reader.readAsBinaryString(file);
    }

If you open up the live demo you should be able to drop a .txt file onto the target and see the contents of the file displayed in the <pre> element below.

See The Demo Download The Code

Browser Compatibility

Browser support for native drag and drop is actually pretty good. All the major desktop browsers support the API. Support amongst mobile browsers is poor though, with only IE Mobile supporting native drag and drop.

• IE 10+ – Partially supported in versions 5.5 and up (no files)
• IE Mobile 10
• Firefox 3.5+
• Chrome 4.0+
• Safari 3.1+
• Opera 12+

You can find a comprehensive list of supported browsers at caniuse.com.

Final Thoughts

The Drag and Drop API has a lot of possible uses within modern web applications. With pretty robust browser support on desktop it seems that we could be seeing it used a lot more in the future.

The future is a little more blurry for mobile devices. Touch screen devices are a natural environment for drag and drop interfaces and yet (despite significant advances in other areas related to touch) native drag and drop is still missing from many mobile browsers.

I’m interested to hear your thoughts on the Drag and Drop API. How do you see yourself using the API in your projects? and what are your thoughts about Drag and Drop on mobile?

Useful Links

• Drag and Drop Specification (WHATWG)
• Drag and Drop Documentation (MDN)
• Can I use… Drag and Drop

The post Implementing Native Drag and Drop appeared first on Treehouse Blog.

The following is a guest post by Ryan Burnette. As you'll read below, Ryan was working on a WordPress site that utilized a plugin that used the Instagram API to pull down photos. He was using it in a bit of a non-standard way that lead to lots of requests and a very slow site. In poking around at different solutions, he came across fragment caching. But unfortunately some of the information he found was outdated, so, like a good developer, he updated it. Here's the backstory and journey.

We all know web performance is important. For developers who build custom WordPress themes, however, it's pretty far down on the priority list when actually writing code. The code which renders elements on the page is usually written in the simplest, most friendly way possible using the functions that are available. This leads to code that is easily created, read, and maintained. It also leads to elements which have a very inefficient rendering process with extraneous loops and database queries.

A few extra milliseconds really start to add up. Compound this with increases in site traffic and major performance problems can arise.

Lots of really smart people have already applied their brains to this problem. The WordPress community has produced some great caching plugins. W3 Total Cache is one of them. I love them and use them frequently, but sometimes I don't need all that power. I might want to avoid configuration or have elements which aren't cache-friendly. It's also nice to keep plugins to a minimum to avoid maintenance hassles down the road.

This led to me pursue a different approach. I wanted to use a very small amount of code to cache just a few elements on the page which are too clumsy to render on every load.

Fragment Caching

When a WordPress page loads, PHP is processed and the MySQL database is queried. Sometimes a block of code makes many queries and takes a while to run. Fragment caching takes the output of a code block and stores it so for a predetermined amount of time. When the code runs, as long as the time limit hasn't elapsed, the block is ignored and the stored output is returned and printed onto the page.

Fragment caching is nothing new. WordPress core developer Marc Jaquith wrote about fragment caching. I later found a Gist that simplified Jaquith's class into a function. I forked that and modified from there.

In WordPress versions before 2.5, WP_Cache objects could be used as Jaquith's example demonstrates for persistent caching, or caching that lasts longer than one page load. The Transients API can create persistent database objects with a convenient expiration feature. My fragment caching snippet uses this method to store fragments.

Here is few lines of code can be included in the functions.php file, allowing any output to be cached as a fragment. Here's the code.

function fragment_cache($key, $ttl, $function) {
      if ( is_user_logged_in() ) {
        call_user_func($function);
        return;
      }
      $key = apply_filters('fragment_cache_prefix','fragment_cache_').$key;
      $output = get_transient($key);
      if ( empty($output) ) {
        ob_start();
        call_user_func($function);
        $output = ob_get_clean();
        set_transient($key, $output, $ttl);
      }
      echo $output;
    }

The function takes three arguments:

• Key: a simple string which identifies the fragment. Notice that the function adds a prefix to avoid colliding with other transients. You can alter the prefix by editing the function or adding a filter that matches the 'fragmentcacheprefix' tag.

• Time to live: a time in seconds for the cache to live. I usually make use of time constants. For example, DAYINSECONDS is 86400, the number of seconds in a day. This helps those of us who are too lazy for some simple math.

• Function: the function which creates the output. This can be anything as the examples in this post show.

Usage Examples

Using fragment caching is as easy as wrapping some HTML and PHP in function.

Here's some code that a developer might write on a WordPress site or application.

<p>Here's some HTML.</p>
    
    <?php
    // Here's some PHP
    $args = array(
      'post_type' => 'my_data',
      'posts_per_page' => -1
    );
    $posts = get_posts($args);
    foreach ( $posts as $p ) {
      echo '<pre>';
      echo get_post_meta($p,'some_meta',true);
      echo '</pre>';
    }?>
    
    <p>The PHP in this block runs and executes queries with every page load. :(</p>

Here's the same code implemented using the fragment caching snippet. Notice we're using HTML and PHP and that gets caught by the function and cached.

Let's recap the function's three arguments:

• A tag to represent the cache. Here's a tip. If this code varies per page, concatenate the post ID into the tag to create a separate cache for each page. This would be important if the main loop is being fragment cached.
• The timeout. I usually use WordPress time constants, but any amount of time in seconds can be used.
• The output code itself. Notice that it's kept inside a function. This function is passed into the fragment cache function. That's right, you can pass a function as an argument in PHP.

<?php
    // After
    fragment_cache('my_footer', DAY_IN_SECONDS, function() { ?>
    
    <p>Here's some HTML.</p>
    
    <?php
    // Here's some PHP
    $args = array(
      'post_type' => 'my_data',
      'posts_per_page' => -1
    );
    $posts = get_posts($args);
    foreach ( $posts as $p ) {
      echo '<pre>';
      echo get_post_meta($p,'some_meta',true);
      echo '</pre>';
    }
    ?>
    
    <p>And everything this block outputs will be fragment cached. :)</p>
    
    <?php }); ?>

Examples

Here are a few examples of places where I spare my database the effort of rendering an element more often than it really needs to.

Custom Footers

The most common place where I implement this function is in a custom footer. I'll often make a footer that contains not only WordPress menus, but menus I'm generating based on the get_posts() function and additional get_post_meta() functions for each iterated post. I've found many cases where it's taking 100-200 milliseconds to render a big footer. Fragment caching makes the load time of such elements irrelevant.

Tables Of Data

WordPress has been gaining popularity as an application development platform. There's a lot of buzz about this right now. Like it or not, people are going to build apps in WordPress. This often leads to situation where what would normally be a group of database objects are stored as posts in a custom post type. Each attribute becomes a piece of meta on that post rather than an attribute of a true database object. Querying and rendering a table of data stored in this way takes a long time. Fragment caching it can solve the problem.

Embarrassingly Long Loops

There are thousands of embarrassingly long and convoluted loops out there. I've written a few of them. No matter what inefficient piece of code you have written, you can stick it in a fragment cache and it will load fast.

A Test Case

I'm the webmaster for STUDIOCRIME, a site which aggregates street art videos. WordPress provides a fantastic, simple CMS for our curators to use when posting and organizing video content for the site. The video collection pages load over 80 posts each time they viewed. Each of these iterations also queries the database for post meta.

We're also displaying a lot of content in the sidebar using a plugin authenticates and pulls data from the Instagram API. The plugin wasn't meant to be used in quite the way we're using it. Each Widget instantiates the plugin separately. This leads to very long load times.

It sure was quick and easy to build, but milliseconds here and there added up to a page which takes between 1500 and 5000 milliseconds to render. Five seconds is a long time when waiting for a web page to load.

We chose not to use a caching plugin like W3 Total Cache because decisions about how a page should load and track user data within the PHP. Page caching would keep this PHP from running.

This presented the perfect opportunity to both use fragment caching and to test the gains that can be realized by caching fragments which are slow to load.

I ran these tests using Apache Bench. Apache Bench makes one or more requests either concurrently or back-to-back and reports the time it took the web server to serve the pages. Note that without caching a single request took about three times longer to load. Compound this with multiple requests and the time it takes to get a response gets pretty high, 3 to 5 seconds. Fragment caching the slow parts of the site got the times back down and gave us the performance we needed under heavier loads.

These test show the rendering times for a single page under a concurrent load of 10, 100 and 1000 requests.

Happy caching!

WordPress Fragment Caching Revisited is a post from CSS-Tricks

The Web Content Accessibility Guidelines Working Group today published updates of two Notes that accompany WCAG 2.0: Techniques for WCAG 2.0 and Understanding WCAG 2.0. (This is not an update to WCAG 2.0, which is a stable document.) For background, important information about techniques, and opportunities to contribute to future updates, please see the Understanding Techniques for WCAG Success Criteria e-mail. Read about the Web Accessibility Initiative (WAI).