Drag and Drop of a jQuery widget

In order to make an object to be draggable, you need to do the following:

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">
<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>
<body class='default'>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
$("#calendar").jqxCalendar({ width: 250, height: 250 });
<div id='calendar'>


About admin

This entry was posted in jQuery, jQuery Plugins, jQuery UI, jqxCalendar and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply