Open In App

jQuery UI Droppable accept Option

Last Updated : 19 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Droppable accept option is used to control the draggable elements that are accepted by the droppable. It accepts a value as either Selector or Function().

Syntax:

$( ".selector" ).droppable({
  accept: ".special"
});

CDN Link: First, add jQuery UI scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
    "//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        h1 {
            color: green;
        }
  
        div {
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
  
        #div2 {
            width: 150px;
            height: 150px;
            background: blue;
        }
  
        #div1 {
            position: absolute;
            left: 250px;
            width: 200px;
            height: 200px;
            background: green;
            color: #fff;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>jQuery UI Droppable accept Option</h3>
  
    <div id="div1">Drop here</div>
    <div id="div2">Drag me</div>
  
    <script>
        $("#div2").draggable();
        $("#div1").droppable({
            accept: "#div1"
        });
    </script>
</body>
  
</html>


Output:

Droppable accept option

Reference: https://api.jqueryui.com/droppable/#option-accept



Previous Article
Next Article

Similar Reads

jQuery UI Droppable activeClass Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Droppable activeClass option is used to add the class that will be added to the droppable while an acceptable draggable is being dragged. Syntax: $( ".selector" ).droppa
1 min read
jQuery UI Droppable option() Method
jQuery Mobile is a web-based technology that can be used to make responsive content for websites that can be accessed on all types of smartphones, tablets, and desktops. In this article, we are going to learn the jQuery Mobile Droppable option() method. Using this method, we can get, set or update any parameter’s value of the Droppable widget. We c
3 min read
jQuery UI Droppable disabled Option
jQuery Mobile is a web-based technology that is used to make responsive content for websites that can be accessed on all types of smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Droppable disabled Option to disable the droppable if set to true. and this also accepts boolean parameters. Syntax: The disabled op
2 min read
jQuery UI Droppable scope Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily. In this article, we are going to learn the jQuery UI Droppable scope Option.
2 min read
jQuery UI Droppable classes Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Droppable classes option is used to add additional classes to the widget's elements. Syntax: Initializing the droppable with the classes option. $( "#divID" ).droppable(
2 min read
jQuery UI Droppable tolerance Option
jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily. In this article, we will learn ho
2 min read
jQuery UI Droppable hoverClass Option
jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily. In this article, we will learn ho
2 min read
jQuery UI Droppable greedy Option
jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily. In this article, we will learn ho
2 min read
jQuery UI | draggable() and droppable() methods
jQuery UI is a mixture of methods and a set of user interface effects, widgets, interactions and themes which can be provided in the web page using jQuery methods. If you want to build up a powerful web application that includes various features such as dragging, dropping, date picker, tooltips, etc. then jQuery UI is a perfect choice to build up t
5 min read
jQuery UI Droppable Complete Reference
The jQuery UI Droppable widget is used to perform drop events. This widget creates targets for draggable elements. There are lots of options, methods and events are available in this widget, all of them are listed and categorized below.jQuery UI Droppable Widget Options: jQuery UI Droppable accept OptionjQuery UI Droppable activeClass OptionjQuery
1 min read