jquery-based Draggable div

Yesterday, we introduced a beautiful example of a draggable div based on the jquery UI, and today we are going to share a draggable div that is based on jquery. This draggable div is just a reference to jquery, without the need to reference the jquery UI. The coordinates of the mouse are also recorded in real time. Let's see it together.

Online preview Source Download

The implemented code.

HTML code:

  <spanclass= "Text Noselect">Draggin ' WINDOWS<BR/>        <ahref= "Http://www.w2bc.com">This is a old one. Click here for access the newer one.</a></span>    <Divclass= "Window Noselect">        <Divclass= "Pew">Header</Div>        <Divclass= "Container">The Cords</Div>    </Div>

CSS code:

. Noselect{-webkit-touch-callout:None;-webkit-user-select:None;-khtml-user-select:None;-moz-user-select:None;-ms-user-select:None;User-select:None; }HTML{width:100%;Height:100%; }Body{background:radial-gradient (#ACBEC8, #3A4E57);margin:0;width:100%;Height:100%;font-family:' Raleway ', Sans-serif; }. Testtext{width:100%;Color: White;text-align:Center;Display:Inline-block;Padding-top:30VH;font-size:48px;Text-shadow:0 0 6px #333; }. Text{width:100%;Color: White;text-align:Center;Display:Inline-block;padding:40px 0;font-size:48px;Line-height:30px; }. Text A{text-decoration:None;font-size:15px;Line-height:20px;Color: White; }. Window{width:500px;Height:300px;background:#181818;Margin-left:-250px; Left:50%;position:Absolute; }. Pew{width:100%;Height:30px;text-align:Center;Line-height:30px;Color:#111;background:#E31836;cursor:default; }. Container{width:100%;Height:Calc (100%-30px);Color:#eee;padding:35px 0 0 0;text-align:Center;font-size:36px; }

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/8756

jquery-based Draggable div