User Rating: 1 / 5

Star ActiveStar InactiveStar InactiveStar InactiveStar Inactive
 
Jquery drag and drop

In this tutorial you will learn how to create Drag and Drop in JQuery. 

 

Draggable

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
 <p>Drag me around</p>
</div>

 
</body>
</html>

 

Droppable

Enable any DOM element to be droppable, a target for draggable elements.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
 
 
</body>
</html>
Recent Topics
Subject
Post Reply
Open
Recent
Features Review : Components MApplication Form untuk permohonan pekerjaan melalui laman web.
By abdkode Fri 22 Feb 2019 3:25 pm Board Bahasa Language
0
3055
Fri 22 Feb 2019 3:25 pm By abdkode
Features Review : Components MComponentgen & M Packet untuk membantu dengan Menjana Komponen, Modul, Plugin
By abdkode Fri 22 Feb 2019 2:26 pm Board Bahasa Language
0
2949
Fri 22 Feb 2019 2:26 pm By abdkode
Features Review : Components MCharts untuk memproses data dari MJForms menjadi graf
By abdkode Fri 22 Feb 2019 2:02 pm Board Bahasa Language
0
2727
Fri 22 Feb 2019 2:02 pm By abdkode
Features Review : Components MDBridge untuk menyambung data pengguna antara Joomla dan PHPbb Webboard
By abdkode Thu 21 Feb 2019 6:04 pm Board Bahasa Language
0
2982
Thu 21 Feb 2019 6:04 pm By abdkode
Features Review : MDEvents untuk mengurus pelbagai jadual data aktiviti
By abdkode Thu 21 Feb 2019 4:51 pm Board Bahasa Language
0
1903
Thu 21 Feb 2019 4:51 pm By abdkode
Features Review : Component MJUpgrade untuk menaik taraf Joomla 1.5 ke Joomla 2.5, 3.X
By abdkode Thu 21 Feb 2019 4:10 pm Board Bahasa Language
0
6239
Thu 21 Feb 2019 4:10 pm By abdkode
Features Review : Mod Mslideshows untuk memaparkan gambar, video Youtube dari kandungan
By abdkode Thu 21 Feb 2019 3:29 pm Board Bahasa Language
0
1401
Thu 21 Feb 2019 3:29 pm By abdkode
Plugin Editors XTD Multicontent 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:28 pm Board korean Language - 한국어
0
9542
Thu 21 Feb 2019 12:28 pm By wipaporn
Module M Slideshows 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:27 pm Board korean Language - 한국어
0
5237
Thu 21 Feb 2019 12:27 pm By wipaporn
Component M Multisite Master 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:27 pm Board korean Language - 한국어
0
5435
Thu 21 Feb 2019 12:27 pm By wipaporn
Component M Multisite Client 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:27 pm Board korean Language - 한국어
0
8393
Thu 21 Feb 2019 12:27 pm By wipaporn
MDFiles Featured 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:26 pm Board korean Language - 한국어
0
9632
Thu 21 Feb 2019 12:26 pm By wipaporn
Module MDFiles Popular 사용 지침과 설명
By wipaporn Thu 21 Feb 2019 12:25 pm Board korean Language - 한국어
0
5954
Thu 21 Feb 2019 12:25 pm By wipaporn
Components MDFiles 사용 지침과 설명
By wipaporn Wed 20 Feb 2019 7:13 pm Board korean Language - 한국어
0
2428
Wed 20 Feb 2019 7:13 pm By wipaporn
Features Review : Mod Menu Json untuk menyemak Nama Domain dan memaparkan artikel dari master side
By abdkode Wed 20 Feb 2019 6:53 pm Board Bahasa Language
0
2275
Wed 20 Feb 2019 6:53 pm By abdkode
Module MDFiles Recent 사용 지침과 설명
By wipaporn Wed 20 Feb 2019 6:50 pm Board korean Language - 한국어
0
5620
Wed 20 Feb 2019 6:50 pm By wipaporn
Module MDFiles Categories 사용 지침과 설명
By wipaporn Wed 20 Feb 2019 6:41 pm Board korean Language - 한국어
0
5904
Wed 20 Feb 2019 6:41 pm By wipaporn
Features Review :Mod Lastnews json slider untuk ambil artikel dari Master Site dipaparkan di Web Client secara Slide.
By abdkode Wed 20 Feb 2019 6:11 pm Board Bahasa Language
0
2603
Wed 20 Feb 2019 6:11 pm By abdkode
Component MJForm 사용 지침과 설명
By wipaporn Wed 20 Feb 2019 5:59 pm Board korean Language - 한국어
0
5712
Wed 20 Feb 2019 5:59 pm By wipaporn
Features Review : M Multisite Content untuk mengedarkan data dari Master Site ke Webclient
By abdkode Wed 20 Feb 2019 5:23 pm Board Bahasa Language
0
5403
Wed 20 Feb 2019 5:23 pm By abdkode