"Drag and Drop" draggable div

//a draggable div$.extend ({extdrag:function(Selector_target, Selector_hot) {//selector_target: Target, Selector_hot: Hot zone        var$target =$ (selector_target), uniqueness=NewDate (). GetTime (); $ (Selector_hot|| $target). MouseDown (function(e) {var_style = ' <style>.drag-active{opacity:0.7!important}.drag-mask{position:fixed;height:100%;width:100%; Z-index:999999998;background: #fff; Opacity:0;filter:alpha (opacity=0); cursor:move}.drag-proxy{position:fixed; z-index:999999999;box-sizing:border-box;border:2px dashed #f00; Background:rgba (255,255,0,0.2); cursor:move}</ Style> '; $(' Body '). Append (' <div id= "' + Uniqueness + '" ><div class= "Drag-mask" ></div><div class= "Drag-proxy "> ' + _style + ' </div></div> '); var$box = $ (' # ' +uniqueness), $proxy= $box. Find (' Div.drag-proxy '); $proxy. css ({' Width ': $target. addclass (' drag-active '). Outerwidth (),' Height ': $target. Outerheight (),' Top ': $target. css (' top '),                ' Left ': $target. css (' left ')            }); var_offset =$target. offset (); varx = E.pagex-_offset.left, y= E.pagey-_offset.top, left, top; varFmousemove =function(e) { left= E.pagex-x; Top= E.pagey-y; if(Top < 0) top = 1; $proxy. css ({' Left ': Left,' Top ': Top});            }; varFmouseup =function() {$target. Removeclass (' Drag-active '). css ({' Left ': Left,' Top ': Top});                $box. Remove (); $ (document). Off (' MouseMove ', Fmousemove); $ (document). Off (' MouseUp ', Fmouseup);            }; $ (document). On (' MouseMove ', Fmousemove); $ (document). On (' MouseUp ', Fmouseup); return false; }). css (' Cursor ', ' move '); }});//use case$.extdrag (' #Selector_Target ', ' #Selector_Hot ');//parameters can be: string | | JQ Object | | Dom Object

"Drag and Drop" draggable div