使拖放更加用户友好？如何自定义拖拽样式
时间：2023-03-27 23:47:19
HTML
娆㈣繋鍏虫敞寰俊鍏紬鍙凤細鍓嶇渚︽帰鍦╳eb寮€鍙戜腑缁忓父浼氶亣鍒伴渶瑕佹嫋鎷界殑鍦烘櫙銆備负浜嗘洿濂界殑浣撻獙锛屾嫋鎷藉尯鍩熼渶瑕佹湁涓€瀹氱殑鍙樺寲鎻愮ず锛屽憡璇夌敤鎴凤細鈥滅幇鍦ㄥ彲浠ユ斁杩欓噷浜唦鈥濓紝姣斿鏈枃灏变粙缁嶄簡濡備綍鑷畾涔夋嫋鎷芥牱寮忥紝鎺ヤ笅鏉ヤ竴鎺㈢┒绔熻繖娆″浣曡嚜瀹氫箟dragover鏍峰紡銆?銆乨ragenter鍜宒ragleave瑕佽揪鍒拌繖鏍风殑鏁堟灉锛屽鐞哾ragenter鍜宒ragleave鏄皯涓嶄簡鐨勩€傚綋琚嫋鍔ㄧ殑鍏冪礌杩涘叆涓€涓湁鏁堢殑鏀剧疆鐩爣鏃讹紝浼氳Е鍙慸ragenter浜嬩欢銆傚綋琚嫋鍔ㄧ殑鍏冪礌绂诲紑鏈夋晥鐨勬斁缃洰鏍囨椂锛屼細瑙﹀彂dragleave浜嬩欢銆傚亣璁炬湁杩欐牱涓€涓粨鏋勪綋锛屽叾涓璱mg鏄嫋鍔ㄧ洰鏍囷紝div銆俢ontent鏄斁缃洰鏍囥€?img>
鐒跺悗鐩戝惉document.addEventListener('dragleave',function(ev){console.log('dragleave',ev.target)})document.addEventListener('draenter',function(ev){console.log('draenter',ev.target)})閭ｄ箞鍦ㄥ皢img鎷栧叆div.content鐨勮繃绋嬩腑锛岃偗瀹氫細瑙﹀彂dragenter鍜宒ragleave浜嬩欢锛屽涓嬪鏋滈〉闈㈡瘮杈冪畝鍗曪紝鑷畾涔夋嫋鎷借繃绋嬩篃姣旇緝瀹规槗function(ev){ev.target.toggleAttribute('over',true);})閫氳繃娣诲姞over灞炴€ц嚜瀹氫箟鏍峰紡銆俢ontent[over]{outline:4pxsolidslateblue;}濡備笅鏁堟灉鏄笉鏄緢绠€鍗曪紵鍏跺疄鍦ㄥ疄闄呬娇鐢ㄤ腑杩樻槸鏈夊緢澶氬眬闄愭€х殑銆備笅闈㈠皢涓€涓€浠嬬粛銆?.褰撴斁缃洰鏍囨湁瀛愬厓绱犳椂锛屽ぇ澶氭暟鎯呭喌涓嬶紝鏀剧疆鐩爣涓嶄负绌猴紝杩樻湁鍏朵粬瀛愬厓绱犮€傚鏋滀娇鐢ㄤ笂闈㈢殑鏂规硶锛屽氨浼氬嚭鐜伴棶棰樸€傜幇鍦紝鍋囪甯冨眬鏄繖鏍风殑锛屼负浜嗗尯鍒嗭紝鍙互缁欓渶瑕佹斁缃殑鍏冪礌鍔犱笂涓€涓睘鎬э紝姣斿allowdrop锛岃〃绀哄厑璁告斁缃?img>
涓嶅厑璁告斁缃?/div>
杩欓噷鎴戜滑閫氳繃灞炴€ф潵鍖哄垎document.addEventListener('dragleave',function(ev){if(ev.target.getAttribute('allowdrop')!==null){ev.target.toggleAttribute('over',false);}})document.addEventListener('dragenter',function(ev){if(ev.target.getAttribute('allowdrop')!==null){ev.target.toggleAttribute('over',true);}})鏁堟灉濡備笅锛屽彲浠ョ湅鍒帮紝褰撴嫋鍔ㄧ洰鏍囩粡杩囧瓙鍏冪礌鏃讹紝澶栧眰鏍峰紡宸茬粡涓㈠け銆傚師鍥犲叾瀹炲緢绠€鍗曘€傜┛杩囧瓙鍏冪礌鏃讹紝droptarget涔熶細瑙﹀彂dragleave浜嬩欢锛佹湁娌℃湁鍔炴硶涓嶈Е鍙戝畠锛熻繖閲屾湁涓ょ鏂瑰紡锛氫竴鏄彲浠ュ彇娑堝dragleave鐨勭洃鍚紝鍥犱负鍦ㄦ墽琛宒ragleave鏃讹紝鍏冪礌鏈韩骞朵笉鐭ラ亾鍗冲皢杩涘叆鍝釜鍖哄煙锛屽緢瀹规槗鈥滆浼も€濄€傝€屾槸姣忔dragenter锛屽厛鍘绘帀涓婁竴涓猟roptarget鐨勫睘鎬э紝鍐嶆坊鍔犱竴涓柊鐨勶紝鏈夌偣绫讳技tab鐨勬搷浣溿€傚叿浣撳疄鐜板涓嬶細varlastDrop=null;document.addEventListener('draenter',function(ev){if(lastDrop){lastDrop.toggleAttribute('over',false);}constdropbox=ev.target.closest('[allowdrop]');//鑾峰彇鏈€杩戠殑鏀剧疆鐩爣CSS鐨勮繖閲屾湁涓€涓潪甯哥畝鍗曠矖鏆寸殑鏂规硶锛岀洿鎺ョ鐢ㄥ瓙鍏冪礌鐨勯紶鏍囧搷搴旓紝濡備笅銆傚湪浠讳綍瀛愬厓绱犱笂锛岃繖鏄畬缇庣殑馃榿3銆備笂闈㈠灞傚祵濂楁斁缃洰鏍囩殑鏂规硶鍏跺疄鍙互瑙ｅ喅澶ч儴鍒嗛棶棰橈紝姣曠珶澶ч儴鍒嗗満鏅兘鏄钩闈㈢殑銆備絾鏄紝鏈夋椂鍊欎細閬囧埌澶氬眰缁撴瀯锛屾瘮濡傚彲瑙嗗寲缂栬緫宸ュ叿锛屽挨鍏舵槸鐜板湪娴佽鐨勪綆浠ｇ爜骞冲彴锛岄兘浼氭秹鍙婂埌澶氬眰缁撴瀯锛屽亣璁綡TML鏄繖鏍风殑![]()
