Jquery implements drag and drop operations and jquery listens to events. jquery Drag and Drop Operations

Jquery implements drag and drop operations and jquery listens to events. jquery Drag and Drop Operations

A long time ago, I wrote a jquery3D real estate online selection. This plug-in is very simple because it is not actually used in later projects. Therefore, it is not perfect in some places, I am too lazy to modify and maintain it later. Recently put it on github, but few people are interested in it and star. Yesterday, a netizen asked me about the drag and drop operations in this plug-in! Therefore, I would like to briefly explain this plug-in and related knowledge here today, hoping to help my friends!

Introduction -- Some jquery statements

I will not explain the listening events first. Let's take a look at some jquery writing methods! The most common method we use is jquery's css () method. I believe everyone will use it!

If you use css to set an attribute, let's write it as follows:

$("#haorooms").css("width","100px");

What if there are multiple attributes? The statement is as follows:

$(".demo").css({"height":"100px","background-color":"red"});

Put them in an object!

After reading the example above, do you know the style of drag-and-drop projects in my plug-in?

Description of listening event on

We usually write the listening event on as follows:

$ (". Haorooms"). on ("click", function () {alert ("haorooms frontend blog ")})

In fact, let's click it. We can see two parameters with function, which is similar to the css method above. We can also write the following!

$ (". Haorooms "). on ({click: function () {alert ("")}, mouseover: function () {alert ("mouseover") ;}, mouseout: function () {alert ("out ")}})

Now everyone understands it!

The simplest drag effect

The drag-and-drop effect I wrote should be a small amount of code. You can copy it and use it!

The drag code is as follows:

$(".haorooms_drag").on({    mousedown: function(e){                var el=$(this);                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });            },   mouseup: function(e){ $(document).off('mousemove.drag'); }

For more information about e. pageX, e. pageY, and offset (). top, I have provided a detailed description of jquery width and height recorded by MOOC! However, last year's recording has not yet been launched! Pitfalls ~~~ Let's have a special introduction later!

(Source reference: WEB Front-end http://www.linzenews.com/program/web/2815.html)