Jquery 이미지 드래그 설정 ( Web, Mobile )

1.  스크립트 파일을 추가한다. 웹 2개 모바일 2개
모바일은 jquery.ui.touch-punch.min.js 파일을 다운받아 하나더 추가한다.
주소 : https://github.com/furf/jquery-ui-touch-punch

//웹용 스크립트 파일
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//모바일용 스크립트 파일 
<script src="http://code.jquery.com/jquery.min.js"></script>

사용시 예제 소스

$(".img_icons").draggable({
 start : function(event) {
  img_choice = $(this).attr("src");
  img_choice_id = $(this).attr("id");
 },
 stop : function() {
  
 },
 revert : true
});

$(".drop_box").droppable({
 drop : function(event, ui) {
  if (img_choice_id) {    
   if ($(this).attr("id") == "drop_box") {
    if (img_choice == "이미지 주소") {   

    }
   }else {
    alert("error");
   }
  }
  
 }
});              

<!-- 이미지 넣을 투명 공간 -->
<div class="drop_box" id="drop_box">
     <img src=" id="icon_none" />
</div>
<!-- 이미지 넣을 투명 공간 -->

<!-- 옮길 이미지  -->
<div class="img_icons" id="over_1">
 <img alt="" class="img_icon" src="" id="img_icon_1" />            
</div>
<div class="img_icons" id="over_2">
 <img alt="" class="img_icon" src="" id="img_icon_2" />            
</div>
<!-- 옮길 이미지  -->