JavaScript는 웹 페이지 블록 elements_javascript 기술 드래그 및 교체를 구현합니다.

기성 플러그인을 찾아봤더니 내 요구에 맞는 플러그인이 하나도 없어서 인터넷에 있는 예시를 참고해서 직접 구현해 보았으나 아직 최적화가 되지 않았습니다.

코드를 게시해 보겠습니다.
dragtoreplace

<title>DragToReplaceDeom</title> <style> #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:left;width:90px;clear:none;top:0;/**//*background:#DFEFFC;*/} .row span{display:inline-block;width:60px;clear:none;background:#9192B1;height:30px;line-height:30px;margin-bottom:30px;text-align:center;} span.usr{cursor:pointer;position:absolute;display:inline-block;width:60px;clear:none;height:30px;line-height:30px;margin-bottom:30px;text-align:center;background:#4DA74D;color:#fff;} span.usr.catch{background:#BD9B33!important;} </style> <div id="displayRoom"> <div class="row"> <span><span class="usr" id="345">A학생</span></span><span></span><span></span><span></span> </div> <div class="row"> <span><span class="usr" id="123">B학생</span></span><span id="3"></span><span></span><span></span> </div> <div class="row"> <span></span><span></span><span></span><span></span> </div> <div class="row"> <span></span><span><span class="usr" id="456">학생1</span></span><span></span><span></span> </div> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]