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

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.