Droppable for getting started with EasyUI)

What does Droppable mean? To be precise, what does easyui mean. But it doesn't matter. There is no need to tangle with these details. Based on the demo effect on the official website, simply define it as (throwing!

Droppable

Droppable and draggable are similar, but the difference is that the former focuses on putting elements into a container, while the latter focuses on drag-and-drop (although both effects can be achieved ). You can also see from the easyloader source code that droppable does not depend on draggable.

Droppable overwrites the default value $. fn. droppable.

The following describes the attributes, events, and methods of the doc on the official website.

Attribute

Droppable has few attributes. Up to now, easyui has only two tables:

Name	Type	Description	Default Value
Accept	Selector	Determine which classes drag elements are acceptable	Null
Disable	Boolean	If true, stop throwing.	False

Event

Name	Parameters	Description
OnDragEnter	E, source	When the drag element is dragged in, The. source parameter is triggered to specify the DOM element to be dragged.
OnDragOver	E, source	Triggered when the drag element is dragged out (successfully put into a container) (and triggered before onDrop). source parameter specifies the drag DOM Element
OnDragLeave	E, source	The. source parameter is triggered when the drag element is dragged away to specify the DOM element to be dragged.
OnDrop	E, source	When the drag element is put down, The. source parameter is triggered to specify the drag DOM element.

Method

Name	Parameters	Description
Options	None	Return options object
Enable	None	Throwing
Disable	None	Cannot throw

Usage

Like Draggable, Droppable can be created in two ways.

1. Create with html tags:

2. Create through js script:

        <script>        $('#dd').droppable({            accept: '#d1,#d3'        });    </script>

Demo

Easyui provides a demo about Droppable, which is not provided here. Let's look at an official example:

    
      Accept a Drop-jQuery EasyUI Demo    
      
      
  <Script type = "text/javascript" src = "jquery-easyui-1.3.6/jquery. min. js "> </script> <script type =" text/javascript "src =" jquery-easyui-1.3.6/jquery. easyui. min. js "> </script>Drag me! Drag 1 Drag 2 Drag 3 drop here!<Script>/** use js to set the element to */$ (function () {$ ('. drag '). draggable ({proxy: 'clone ', revert: true, cursor: 'pointer', onStartDrag: function () {$ (this ). draggable ('options '). cursor = 'not-allowed'; // set the mouse style to not be dragged $ (this ). draggable ('proxy '). addClass ('dp '); // set style}, onStopDrag: function () {$ (this ). draggable ('options '). cursor = 'auto'; // set the mouse}); // It is easy to set to droppable and can accept elements $ ('# target '). droppable ({accept: '# d 1, # d3 ', onDragEnter: function (e, source) {// drag $ (source ). draggable ('options '). cursor = 'auto'; iterator (source).draggable('proxy'mirror.css ('border', '1px solid red'); $ (this ). addClass ('over');}, onDragLeave: function (e, source) {// get out of $ (source ). draggable ('options '). cursor = 'not-allowed'; expires (source).draggable('proxy'0000.css ('border', '1px solid # ccc '); $ (this ). removeClass ('over');}, onDrop: function (e, source) {// put down $ (this ). Append (source) $ (this ). removeClass ('over'); alert ("I was put down") ;}, // onDropOver triggers onDragOver when the element is dragged out (successfully put into a container: function (e, source) {alert ("I 've been dragged out"); // run before alert ("I 've been put down"), indicating that it is triggered before onDrop. }}) ;}); </Script>

Run the command here and you will not be able to view it on the official website. OVER!

Effect address: http://www.jeasyui.com/demo/main/index.php? Plugin = Droppable & theme = default & dir = ltr & pitem =

Independent site: Click to open the link