1. Include jqxdragdrop.js in your page.
2. Select any HTML element with jQuery.
3. Call the jqxDragDrop constructor.
The sample code below demonstrates how to allow drag and drop of jqxCalendar. Users will be able to move the widget from one location to another in your web application.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script> </head><body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { $("#calendar").jqxCalendar({ width: 250, height: 250 }); $('#calendar').jqxDragDrop(); }); </script> <div id='calendar'> </div> </div></body></html>
