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
介绍Module Mrelated Article Specific Category。存储浏览历史记录。
By wipaporn Wed 13 Feb 2019 3:23 pm Board Chinese Language - 简体中文
0
1047
Wed 13 Feb 2019 3:23 pm By wipaporn
介绍Component mFaceBook以帮助在Facebook上注册网站成员资
By wipaporn Wed 13 Feb 2019 3:20 pm Board Chinese Language - 简体中文
0
349
Wed 13 Feb 2019 3:20 pm By wipaporn
介绍Paytoread。插件只显示一些文本。
By wipaporn Wed 13 Feb 2019 3:17 pm Board Chinese Language - 简体中文
0
335
Wed 13 Feb 2019 3:17 pm By wipaporn
介绍插件MD水印(MD水印插件),自动水印插件
By wipaporn Wed 13 Feb 2019 3:15 pm Board Chinese Language - 简体中文
0
1086
Wed 13 Feb 2019 3:15 pm By wipaporn
Introducing Plugin MD Watermark, plug for automatic watermarking
By wipaporn Wed 13 Feb 2019 3:11 pm Board English Language
0
1413
Wed 13 Feb 2019 3:11 pm By wipaporn
Introducing PayToRead. The plugin shows only some text.
By wipaporn Wed 13 Feb 2019 3:08 pm Board English Language
0
1508
Wed 13 Feb 2019 3:08 pm By wipaporn
Introducing Component MFacebook to help with website membership registration with Facebook
By wipaporn Wed 13 Feb 2019 3:06 pm Board English Language
0
1526
Wed 13 Feb 2019 3:06 pm By wipaporn
Introducing Mrelated Article Specific Category Module (Storage browsing history).
By wipaporn Wed 13 Feb 2019 3:03 pm Board English Language
1
2287
Tue 27 Oct 2020 6:28 pm By prmindphp
Introducing Mod MDFiles Categories Module Bring Categories from MDFile.
By wipaporn Wed 13 Feb 2019 2:59 pm Board English Language
0
5407
Wed 13 Feb 2019 2:59 pm By wipaporn
Introducing the Mod MDFile recent module to show files from MDFile
By wipaporn Wed 13 Feb 2019 2:56 pm Board English Language
0
6665
Wed 13 Feb 2019 2:56 pm By wipaporn
Introducing MDFile Components for Joomla, helping to download document files on the website.
By wipaporn Wed 13 Feb 2019 2:49 pm Board English Language
3
2938
Wed 29 Apr 2020 11:49 am By mindphp
Features Review : Components MDFile membantu memuat turun fail dokumen di laman web.
By abdkode Wed 13 Feb 2019 2:37 pm Board Bahasa Language
0
1113
Wed 13 Feb 2019 2:37 pm By abdkode
Features Review : Mod MDFile recent Module yang menunjukkan fail yang diupload
By abdkode Tue 12 Feb 2019 6:45 pm Board Bahasa Language
0
1440
Tue 12 Feb 2019 6:45 pm By abdkode
Features Review : Plugin MD Watermark memudahkan dalam meletakan tanda air atau watermark
By abdkode Tue 12 Feb 2019 4:20 pm Board Bahasa Language
0
827
Tue 12 Feb 2019 4:20 pm By abdkode
这个(Pace)是什么?
By Parichat Wed 06 Feb 2019 7:25 pm Board Chinese Language - 简体中文
0
742
Wed 06 Feb 2019 7:25 pm By Parichat
pace 가 뭐죠?
By Parichat Wed 06 Feb 2019 7:25 pm Board korean Language - 한국어
0
521
Wed 06 Feb 2019 7:25 pm By Parichat
Mindphp webboard 등록하는 방법
By wipaporn Wed 06 Feb 2019 6:12 pm Board korean Language - 한국어
0
164
Wed 06 Feb 2019 6:12 pm By wipaporn
minephp webboard 注册方法
By wipaporn Wed 06 Feb 2019 5:49 pm Board Chinese Language - 简体中文
0
236
Wed 06 Feb 2019 5:49 pm By wipaporn
How to register minephp webboard
By wipaporn Wed 06 Feb 2019 5:30 pm Board English Language
0
450
Wed 06 Feb 2019 5:30 pm By wipaporn
Let's get to know Korea
By wipaporn Mon 04 Feb 2019 8:04 pm Board korean Language - 한국어
0
559
Mon 04 Feb 2019 8:04 pm By wipaporn