(^286) ❘ CHAPTER 11 HTML5 DRAG AND DROP
FIGURE 11-1
NOTE To run this example in Internet Explorer, you should upload the
documents to a web server.Prerequisite Plugins
This example begins with the creation of two jQuery plugins, $.outerHTML() and $.enableDragAnd-
Drop(). The $.outerHTML() plugin is designed to implement IE’s native outerHTML property as a
jQuery plugin. The purpose of this is to enable easily pasting HTML snippets to the system clip-
board using the drag-and-drop API. Using jQuery’s existing html() method would get only the con-
tent of an element, for example:<div class='finderIcon'></div>
<div class='finderDirectoryName'>
<span>Sites</span>
</div>Using drag and drop to relocate a complete element, it is instead desirable to have the outer <div>
element as well as its content.<div class='finderDirectory' data-path='/Sites'>
<div class='finderIcon'></div>
<div class='finderDirectoryName'>
<span>Sites</span>
</div>
</div>The $.outerHTML() plugin provided here implements the functionality of the IE property in
browsers that haven’t implemented the IE property, such as Safari. These snippets can be taken out
of the DOM and then reinserted when a successful drag-and-drop operation has taken place.