Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use Jquery easyUi Droppable components, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Life is to keep ourselves alive, and how we live is to constantly improve ourselves. So today let's take a look at the Droppable component of Jquery easyUi.

I. loading mode

When using a placed component, there is a prerequisite that there needs to be an element that can be dragged, otherwise our placed component will be meaningless. So we have an element with an ID of "bb" set to class drag by default.

1.css style loading mode

2.Jquery loading mode

/ / JS part $('# box') .droppable ({accept:'#bb',}); / / HTML part

II. Draggable attribute

$('# box') .droppable ({accept:'# bb', / / sets which elements are acceptable, default is null disabled: true, / / sets whether it can be placed, Boolean type, default is true})

III. Droppable event

Event name

Pass parameters

Description

OnDragEnter

E,source

Triggered when an element is dragged into the drop area

OnDragOver

E,source

Touch the dragged element as it passes through the drop area

OnDragLeave

E,source

Triggered when a dragged element leaves the drop area

OnDrop

E,source

Triggered when a dragged element is dropped into the drop area

Note: the source parameter gets the DOM element.

$('# dd'). Droppable ({accept:'# box', onDragOver: function (e, source) {alert ("touch when the dragged element passes through the drop area");}, onDragEnter: function (e, source) {alert ("triggered when dragged element into the drop area") }, onDragLeave: function (e, source) {alert ("triggered when the dragged element leaves the drop area");}, onDrop: function (e, source) {alert ("trigger when the dragged element is dropped into the drop area");},})

4. Droggable method

Method

Description

Options

Returns the property object

Enabl

Enable Placement work

Disable

Disable Placement

/ / return property object console.log ($('# box'). Droggable ('options')); / / disable placement of $(' # box'). Draggable ('disable'); / / enable placement of $(' # box'). Draggable ('enable') Thank you for reading this article carefully. I hope the article "how to use Jquery easyUi Droppable components" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.