jquery外掛 使任何可見節點移動 節點移動
阿新 • • 發佈:2018-11-19
頁面上有時候會遇到需要某個節點移動的情況
這裡提供一個jquery的移動外掛
使用方法
$(移動控制元件節點||移動控制元件節點選擇器).ElMove(需要移動的jQuery節點)
如
自己移動自己
$("#my").ElMove($("#my"))
自己的標題欄移動自己
$("#my .title").ElMove($("#my"))
(function ($){ /** * @name 移動El v0.2 * @example $('移動控制元件').ElMove(需要移動的jQuery節點) * @author hank */ $.fn.ElMove = function (PEl){ var my = $(this); my.each(function (){ var now = $(this); now.css({"cursor": "move"}); now.bind({"mousedown.ElMove":function (eve){ eve.preventDefault(); $(this).attr('is_elmove',"1"); },"mouseup.ElMove":function (){ $(this).attr('is_elmove',"0"); $(this).removeData('ElMove_pageXY'); }, "mousemove.ElMove":function (eve,myeve){ var moveMy = $(this); if(!moveMy.is('[is_elmove="1"]')) return; if(typeof myeve !== 'undefined') eve = myeve; else eve.stopPropagation(); var oldpageXY = moveMy.data('ElMove_pageXY'); var nowpageXY = {"X":eve.pageX,"Y":eve.pageY}; if(!oldpageXY){ oldpageXY = {"X":eve.pageX,"Y":eve.pageY}; } var Mleft = nowpageXY.X - oldpageXY.X; var Mtop = nowpageXY.Y - oldpageXY.Y; moveMy.data('ElMove_pageXY',nowpageXY); if(!PEl.is(':visible')) return; var nowOffset = PEl.offset(); if(PEl.css('position') == "fixed"){ PEl.css('position',"absolute"); PEl.offset(nowOffset); } PEl.offset({left:nowOffset.left+Mleft,top:nowOffset.top+Mtop}); if(Mleft != 0 || Mtop != 0) PEl.trigger("ElMove"); }, "dragstart.ElMove":function (eve){ eve.preventDefault(); } }).attr('data-Elmove-child','1'); }); PEl.attr('data-Elmove-parent','1'); return my; }; $(function (){ $('body').bind({"mousemove.ElMove":function (eve){ var Elmove = $('[is_elmove="1"]'); if(Elmove.length > 0) Elmove.each(function (){ $(this).triggerHandler('mousemove.ElMove',eve); }); },"mouseup.ElMove":function (){ $('[is_elmove="1"]').attr('is_elmove',"0").removeData('ElMove_pageXY'); }, "mouseleave.ElMove":function (){ //移出body是否取消 //$('[is_elmove=1]').attr('is_elmove',"0").removeData('ElMove_pageXY'); } }); }); })(jQuery);