this demo use two jquery plugins

jQuery.event.drag

jQuery.event.drop

the twice can be found at http://threedubmedia.com/

drag and drop demo

  • root
    • Pictures
      • backgrounds
        • dangermouse
          • 002.jpg
          • 019.jpg
          • 021.jpg
          • 022.jpg
          • 023.jpg
          • 024.jpg
          • 025.jpg
          • 026.jpg
          • 027.jpg
          • 028.jpg
          • 029.jpg
          • 030.jpg
          • 031.jpg
          • 033.jpg
          • 034.jpg
          • 035.jpg
          • 036.jpg
        • gnome
          • BlueMarbleWest.jpg
          • FootFall.png
          • FreshFlower.jpg
          • Garden.jpg
          • Spaceflare-nova.jpg
          • Spaceflare-supernova.jpg
          • Spaceflare.jpg
          • SundownDunes.jpg
          • Terraform-blue.jpg
          • Terraform-orange.jpg
          • Wood.jpg
          • YellowFlower.jpg
        • lovelock
          • default-stripes
            • normalish
              • lovelock.png
            • standard
              • lovelock.png
            • wide
              • lovelock.png
        • 003.jpg
        • 013.jpg
        • Blinds.jpg
      • 001.jpg
      • Opera-Background-Space-Harmonica.jpg
      • logo.png
    • admins
      • users
        • img
          • info.png
    • img
      • ext-icons
        • original
          • avi.png
          • css.png
          • doc.png
          • fla.png
          • htm.png
          • html.png
          • js.png
          • mp3.png
          • pdf.png
          • php.png
          • rar.png
          • swf.png
          • txt.png
        • avi.png
        • css.png
        • doc.png
        • fla.png
        • htm.png
        • html.png
        • js.png
        • mp3.png
        • pdf.png
        • php.png
        • rar.png
        • swf.png
        • txt.png
      • icons
        • accept.png
        • add.png
        • anchor.png
        • application.png
        • application_add.png
        • application_cascade.png
        • application_delete.png
        • application_double.png
        • application_edit.png
        • application_error.png
        • application_form.png
        • application_form_add.png
        • application_form_delete.png
        • application_form_edit.png
        • application_form_magnify.png
        • application_get.png
        • application_go.png
        • application_home.png
        • application_key.png
        • application_lightning.png
        • application_link.png
        • application_osx.png
        • application_osx_terminal.png
        • application_put.png
        • application_side_boxes.png
        • application_side_contract.png
        • application_side_expand.png
        • application_side_list.png
        • application_side_tree.png
        • application_split.png
        • application_tile_horizontal.png
        • application_tile_vertical.png
        • application_view_columns.png
        • application_view_detail.png
        • application_view_gallery.png
        • application_view_icons.png
        • application_view_list.png
        • application_view_tile.png
        • application_xp.png
        • application_xp_terminal.png
        • arrow_branch.png
        • arrow_divide.png
        • arrow_down.png
        • arrow_in.png
        • arrow_inout.png
        • arrow_join.png
        • arrow_left.png
        • arrow_merge.png
        • arrow_out.png
        • arrow_redo.png
        • arrow_refresh.png
        • arrow_refresh_small.png
        • arrow_right.png
        • arrow_rotate_anticlockwise.png
        • arrow_rotate_clockwise.png
        • arrow_switch.png
        • arrow_turn_left.png
        • arrow_turn_right.png
        • arrow_undo.png
        • arrow_up.png
        • asterisk_orange.png
        • asterisk_yellow.png
        • attach.png
        • award_star_add.png
        • award_star_bronze_1.png
        • award_star_bronze_2.png
        • award_star_bronze_3.png
        • award_star_delete.png
        • award_star_gold_1.png
        • award_star_gold_2.png
        • award_star_gold_3.png
        • award_star_silver_1.png
        • award_star_silver_2.png
        • award_star_silver_3.png
        • basket.png
        • basket_add.png
        • basket_delete.png
        • basket_edit.png
        • basket_error.png
        • basket_go.png
        • basket_put.png
        • basket_remove.png
        • bell.png
        • bell_add.png
        • bell_delete.png
        • bell_error.png
        • bell_go.png
        • bell_link.png
        • bin.png
        • bin_closed.png
        • bin_empty.png
        • bomb.png
        • book.png
        • book_add.png
        • book_addresses.png
        • book_delete.png
        • book_edit.png
        • book_error.png
        • book_go.png
        • book_key.png
        • book_link.png
        • book_next.png
        • book_open.png
        • book_previous.png
        • box.png
        • brick.png
        • brick_add.png
        • brick_delete.png
        • brick_edit.png
        • brick_error.png
        • brick_go.png
        • brick_link.png
        • bricks.png
        • briefcase.png
        • bug.png
        • bug_add.png
        • bug_delete.png
        • bug_edit.png
        • bug_error.png
        • bug_go.png
        • bug_link.png
        • building.png
        • building_add.png
        • building_delete.png
        • building_edit.png
        • building_error.png
        • building_go.png
        • building_key.png
        • building_link.png
        • bullet_add.png
        • bullet_arrow_bottom.png
        • bullet_arrow_down.png
        • bullet_arrow_top.png
        • bullet_arrow_up.png
        • bullet_black.png
        • bullet_blue.png
        • bullet_delete.png
        • bullet_disk.png
        • bullet_error.png
        • bullet_feed.png
        • bullet_go.png
        • bullet_green.png
        • bullet_key.png
        • bullet_orange.png
        • bullet_picture.png
        • bullet_pink.png
        • bullet_purple.png
        • bullet_red.png
        • bullet_star.png
        • bullet_toggle_minus.png
        • bullet_toggle_plus.png
        • bullet_white.png
        • bullet_wrench.png
        • bullet_yellow.png
        • cake.png
        • calculator.png
        • calculator_add.png
        • calculator_delete.png
        • calculator_edit.png
        • calculator_error.png
        • calculator_link.png
        • calendar.png
        • calendar_add.png
        • calendar_delete.png
        • calendar_edit.png
        • calendar_link.png
        • calendar_view_day.png
        • calendar_view_month.png
        • calendar_view_week.png
        • camera.png
        • camera_add.png
        • camera_delete.png
        • camera_edit.png
        • camera_error.png
        • camera_go.png
        • camera_link.png
        • camera_small.png
        • cancel.png
        • car.png
        • car_add.png
        • car_delete.png
        • cart.png
        • cart_add.png
        • cart_delete.png
        • cart_edit.png
        • cart_error.png
        • cart_go.png
        • cart_put.png
        • cart_remove.png
        • cd.png
        • cd_add.png
        • cd_burn.png
        • cd_delete.png
        • cd_edit.png
        • cd_eject.png
        • cd_go.png
        • chart_bar.png
        • chart_bar_add.png
        • chart_bar_delete.png
        • chart_bar_edit.png
        • chart_bar_error.png
        • chart_bar_link.png
        • chart_curve.png
        • chart_curve_add.png
        • chart_curve_delete.png
        • chart_curve_edit.png
        • chart_curve_error.png
        • chart_curve_go.png
        • chart_curve_link.png
        • chart_line.png
        • chart_line_add.png
        • chart_line_delete.png
        • chart_line_edit.png
        • chart_line_error.png
        • chart_line_link.png
        • chart_organisation.png
        • chart_organisation_add.png
        • chart_organisation_delete.png
        • chart_pie.png
        • chart_pie_add.png
        • chart_pie_delete.png
        • chart_pie_edit.png
        • chart_pie_error.png
        • chart_pie_link.png
        • clock.png
        • clock_add.png
        • clock_delete.png
        • clock_edit.png
        • clock_error.png
        • clock_go.png
        • clock_link.png
        • clock_pause.png
        • clock_play.png
        • clock_red.png
        • clock_stop.png
        • cog.png
        • cog_add.png
        • cog_delete.png
        • cog_edit.png
        • cog_error.png
        • cog_go.png
        • coins.png
        • coins_add.png
        • coins_delete.png
        • color_swatch.png
        • color_wheel.png
        • comment.png
        • comment_add.png
        • comment_delete.png
        • comment_edit.png
        • comments.png
        • comments_add.png
        • comments_delete.png
        • compress.png
        • computer.png
        • computer_add.png
        • computer_delete.png
        • computer_edit.png
        • computer_error.png
        • computer_go.png
        • computer_key.png
        • computer_link.png
        • connect.png
        • contrast.png
        • contrast_decrease.png
        • contrast_high.png
        • contrast_increase.png
        • contrast_low.png
        • control_eject.png
        • control_eject_blue.png
        • control_end.png
        • control_end_blue.png
        • control_equalizer.png
        • control_equalizer_blue.png
        • control_fastforward.png
        • control_fastforward_blue.png
        • control_pause.png
        • control_pause_blue.png
        • control_play.png
        • control_play_blue.png
        • control_repeat.png
        • control_repeat_blue.png
        • control_rewind.png
        • control_rewind_blue.png
        • control_start.png
        • control_start_blue.png
        • control_stop.png
        • control_stop_blue.png
        • controller.png
        • controller_add.png
        • controller_delete.png
        • controller_error.png
        • creditcards.png
        • cross.png
        • css.png
        • css_add.png
        • css_delete.png
        • css_go.png
        • css_valid.png
        • cup.png
        • cup_add.png
        • cup_delete.png
        • cup_edit.png
        • cup_error.png
        • cup_go.png
        • cup_key.png
        • cup_link.png
        • cursor.png
        • cut.png
        • cut_red.png
        • database.png
        • database_add.png
        • database_connect.png
        • database_delete.png
        • database_edit.png
        • database_error.png
        • database_gear.png
        • database_go.png
        • database_key.png
        • database_lightning.png
        • database_link.png
        • database_refresh.png
        • database_save.png
        • database_table.png
        • date.png
        • date_add.png
        • date_delete.png
        • date_edit.png
        • date_error.png
        • date_go.png
        • date_link.png
        • date_magnify.png
        • date_next.png
        • date_previous.png
        • delete.png
        • disconnect.png
        • disk.png
        • disk_multiple.png
        • door.png
        • door_in.png
        • door_open.png
        • door_out.png
        • dot.png
        • dotb.png
        • drink.png
        • drink_empty.png
        • drive.png
        • drive_add.png
        • drive_burn.png
        • drive_cd.png
        • drive_cd_empty.png
        • drive_delete.png
        • drive_disk.png
        • drive_edit.png
        • drive_error.png
        • drive_go.png
        • drive_key.png
        • drive_link.png
        • drive_magnify.png
        • drive_network.png
        • drive_rename.png
        • drive_user.png
        • drive_web.png
        • dvd.png
        • dvd_add.png
        • dvd_delete.png
        • dvd_edit.png
        • dvd_error.png
        • dvd_go.png
        • dvd_key.png
        • dvd_link.png
        • email.png
        • email_add.png
        • email_attach.png
        • email_delete.png
        • email_edit.png
        • email_error.png
        • email_go.png
        • email_link.png
        • email_open.png
        • email_open_image.png
        • emoticon_evilgrin.png
        • emoticon_grin.png
        • emoticon_happy.png
        • emoticon_smile.png
        • emoticon_surprised.png
        • emoticon_tongue.png
        • emoticon_unhappy.png
        • emoticon_waii.png
        • emoticon_wink.png
        • error.png
        • error_add.png
        • error_delete.png
        • error_go.png
        • exclamation.png
        • eye.png
        • feed.png
        • feed_add.png
        • feed_delete.png
        • feed_disk.png
        • feed_edit.png
        • feed_error.png
        • feed_go.png
        • feed_key.png
        • feed_link.png
        • feed_magnify.png
        • female.png
        • film.png
        • film_add.png
        • film_delete.png
        • film_edit.png
        • film_error.png
        • film_go.png
        • film_key.png
        • film_link.png
        • film_save.png
        • find.png
        • flag_blue.png
        • flag_green.png
        • flag_orange.png
        • flag_pink.png
        • flag_purple.png
        • flag_red.png
        • flag_yellow.png
        • folder.png
        • folder_add.png
        • folder_bell.png
        • folder_brick.png
        • folder_bug.png
        • folder_camera.png
        • folder_database.png
        • folder_delete.png
        • folder_edit.png
        • folder_error.png
        • folder_explore.png
        • folder_feed.png
        • folder_find.png
        • folder_go.png
        • folder_heart.png
        • folder_image.png
        • folder_key.png
        • folder_lightbulb.png
      • annonce-btn-on.png
      • annonce-btn.png
      • bg.jpg
      • content-bot.png
      • content-top.png
      • eco.png
      • facebook-on.png
      • facebook.png
      • fb-on.jpg
      • fb.jpg
      • find-btn-on.png
      • find-btn.png
      • input-bg-on.jpg
      • input-bg.jpg
      • logo-rempla-para-medical.jpg
      • logo.jpg
      • phon-on.jpg
      • phon.jpg
      • separ-h.png
      • tw-on.jpg
      • tw.jpg
      • yout-on.jpg
      • yout.jpg
    • js
      • wymeditor
        • iframe
          • default
            • lbl-article.png
            • lbl-aside.png
            • lbl-blockquote.png
            • lbl-command.png
            • lbl-details.png
            • lbl-figcaption.png
            • lbl-figure.png
            • lbl-footer.png
            • lbl-h1.png
            • lbl-h2.png
            • lbl-h3.png
            • lbl-h4.png
            • lbl-h5.png
            • lbl-h6.png
            • lbl-header.png
            • lbl-hgroup.png
            • lbl-mark.png
            • lbl-meter.png
            • lbl-nav.png
            • lbl-p.png
            • lbl-pre.png
            • lbl-progress.png
            • lbl-rp.png
            • lbl-rt.png
            • lbl-ruby.png
            • lbl-section.png
            • lbl-summary.png
            • lbl-time.png
            • wymiframe.html
        • old
          • iframe
            • default
              • lbl-blockquote.png
              • lbl-h1.png
              • lbl-h2.png
              • lbl-h3.png
              • lbl-h4.png
              • lbl-h5.png
              • lbl-h6.png
              • lbl-p.png
              • lbl-pre.png
              • wymiframe.html
          • plugins
            • tidy
              • wand.png
          • skins
            • compact
              • icons.png
            • default
              • icons.png
            • minimal
              • images
                • bg.wymeditor.png
            • silver
              • images
                • bg.wymeditor.png
            • twopanels
              • icons.png
            • wymeditor_icon.png
        • plugins
          • table
            • table_delete_column.png
            • table_delete_row.png
            • table_insert_column.png
            • table_insert_row.png
            • table_join_row.png
          • tidy
            • wand.png
        • skins
          • compact
            • icons.png
          • default
            • icons.png
          • minimal
            • images
              • bg.wymeditor.png
          • silver
            • images
              • bg.wymeditor.png
          • twopanels
            • icons.png
          • wymeditor_icon.png
        • wymeditor-wymeditor-423bda2-very big name huhuhuhuhahahahahahahahahahahahaaha!!!
          • build
            • test
              • advanced.html
              • basic.html
          • src
            • examples
              • 01-basic.html
              • 02-custom-language.html
              • 03-plugin.html
              • 04-multiple-instances.html
              • 05-custom-dialog.html
              • 06-custom-menu.html
              • 07-custom-button.html
              • 08-custom-panel.html
              • 09-two-panels.html
              • 10-resizable.html
              • 11-custom-parser.html
              • 12-custom-layout.html
              • 13-silver-skin.html
              • 14-more-inline-elements.html
              • 15-rdfa-editor.html
              • index.html
            • test
              • unit
                • index.html
              • acronym-dialog.html
              • advanced.html
              • basic.html
              • compact.html
              • different-classes.html
              • embed.html
              • empty.html
              • external_css.html
              • frameset.html
              • frameset2.html
              • fullscreen.html
              • googleapis.html
              • hidden.html
              • inside-table.html
              • jquery-1.3.html
              • lang-fr.html
              • minimal.html
              • noajax.html
              • parser-custom.html
              • raw_css.html
              • rdfa-plugin.html
              • rdfa.html
              • resizable.html
              • rtl.html
              • silver.html
              • skin-custom.html
              • twopanels.html
              • wrap.html
            • wymeditor
              • iframe
                • default
                  • lbl-article.png
                  • lbl-aside.png
                  • lbl-blockquote.png
                  • lbl-command.png
                  • lbl-details.png
                  • lbl-figcaption.png
                  • lbl-figure.png
                  • lbl-footer.png
                  • lbl-h1.png
                  • lbl-h2.png
                  • lbl-h3.png
                  • lbl-h4.png
                  • lbl-h5.png
                  • lbl-h6.png
                  • lbl-header.png
                  • lbl-hgroup.png
                  • lbl-mark.png
                  • lbl-meter.png
                  • lbl-nav.png
                  • lbl-p.png
                  • lbl-pre.png
                  • lbl-progress.png
                  • lbl-rp.png
                  • lbl-rt.png
                  • lbl-ruby.png
                  • lbl-section.png
                  • lbl-summary.png
                  • lbl-time.png
                  • wymiframe.html
              • plugins
                • table
                  • table_delete_column.png
                  • table_delete_row.png
                  • table_insert_column.png
                  • table_insert_row.png
                  • table_join_row.png
                • tidy
                  • wand.png
              • skins
                • compact
                  • icons.png
                • default
                  • icons.png
                • minimal
                  • images
                    • bg.wymeditor.png
                • silver
                  • images
                    • bg.wymeditor.png
                • twopanels
                  • icons.png
                • wymeditor_icon.png
      • zoombox
        • img
          • blank.png
          • close.png
          • loader.png
          • next.png
          • ppnext.png
          • ppprev.png
          • ppsprite.png
          • prev.png
          • simpleclose.png
          • simplenav.png
        • index.html
    • plugins
      • administration
        • imgs
          • admin-arrow.png
          • admin-menu-item.png
        • logout.png
        • notif.png
      • blockzone
        • html
          • bloczone.html
        • thumbs
          • bloczone-A.png
          • bloczone-B.png
          • bloczone-C.png
          • bloczone-D1.png
          • bloczone-D2.png
          • bloczone.png
        • close.png
        • edit.png
        • save.png
      • editable
        • close.png
        • drag.png
        • edit.png
        • html-icon.png
        • html-icon96.png
        • save.png
    • Aqua.jpg
    • catstabs.png
    • content-admin-bot-bg.png
    • content-admin-top-bg.png
    • content-admin.png
    • tabs.png
var tomove;
$("ul.jtree").jtree().jtreeAll().drag("start",function( ev, dd )
{	tomove = $(this);
	return	tomove.clone().css({top:ev.offsetY,left:ev.offsetX}).appendTo(document.body);
}).drag(function( ev, dd )
{	$( dd.proxy ).css({ top: dd.offsetY, left: dd.offsetX });
}).drag("end",function( ev, dd )
{	$( dd.proxy ).remove();
}).drop("start",function()
{	$(this).css("color","#ff00ff");
}).drop("end",function()
{	$(this).css("color","");
}).drop(function( ev, dd )
{	tomove.jtreeMoveTo($(this),opt);
});