Bootstrap modal frame implements drag-and-drop effect _javascript skill

Source: Internet
Author: User

The example of this article for everyone to share the bootstrap modal box to achieve drag-and-drop effect for your reference, the specific contents are as follows

Project with a bit of a mess, jquery and Angularjs together, some plug-ins with the jquery version, and some plug-ins used in the NG version. Get to now test round and round, found modal modal Box limited bug, because the level of the problem, modal box will be left menu occlusion, the need to change the modal box can be dragged.
Search on the Internet, find a blog found that the basic functionality is available. But the effect is not very friendly. The problem has the following two

    • Drag time behind the text will be selected, it is difficult to see
    • The modal modal box will be dragged out of the border, it's hard to look at, and may not be dragged back
    • Modal can be more dynamic but the mouse pointer does not show any, unfriendly

After the top three small problems solved, the basic can be used.

Drag the selected, mainstream WebKit and Firefox browser can be adjusted through the style, and IE browser used a simple JS solution.

 -moz-user-select:none;/* Firefox/
 -webkit-user-select:none;/*webkit Browser * *
 -ms-user-select:none;/*ie10*/
 -khtml-user-select:none;/* Early Browser * *
 user-select:none;
 IE browser compatible
document.body.onselectstart=document.body.ondrag=function () {return
 false;
 }

Drag out of the browser boundary problems, you can increase the collision test, and then increase the cursor:move style, it is more presentable.

Online Demo https://guguji5.github.io/bs-modal-dragable/bs-modal-dragable.html
According to the situation in our project, let him drag in the content area, add a collision detection, the boundary of the region according to the actual situation to write.

Download Demo Self Adjust https://github.com/guguji5/bs-modal-dragable

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.