drappable 이미지로 droppable의 이미지 소스 변경

Question

<div>에는 "droppable"클래스의 세 이미지가 포함되어 있습니다. 테이블에는 마지막 행 <td> 안에 이미지가있는 4 개의 행이 있습니다.

html로는 다음과 같습니다

테이블의 이미지는 위의 빈 상자로 드래그 할 수 있습니다

<div id="box_container"> 
    <img id="empty_box1" class="droppable" src="images/tom.png" /> 
    <img id="empty_box2" class="droppable" src="images/tom.png" /> 
    <img id="empty_box3" class="droppable" src="images/tom.png" /> 
</div> 

<td><img id="" class="draggable" src="images/image1.png" /></td> 

다음은 레이아웃이 다음과 같은 방법의 사진입니다 탁자. 상자는 공백 이미지로 구성되어 있으며 이미지 원본을 빈 상자에 놓은 이미지로 변경합니다. 당신은 (일반적으로 ui라는 이름으로) 두 번째 인수의 draggable 속성을 통해 삭제 된 드래그 할 수있는 요소를 액세스 할 수 있으며, drop 이벤트 콜백 내부

$(document).ready(function() { 
    $(".draggable").draggable({ 
    revert: true, 
    snap: ".droppable", 
    snapMode: "inner" 
    }); 
    $("#tabellen").tablesorter(); 
    $(".droppable").droppable({ 
    accept: ".draggable", 
    drop: function() { 
     console.log(this); 
     var new_pic = $('.draggable').attr('src'); 
     $(this) 
      .attr('src', new_pic) 
      .attr('width', 150) 
      .attr('height', 150) 
      .addClass('zoomable'); 
    } 
    }); 
}); 

Answer 1

:

다음은 현재 단계에서 내 코드입니다.

$(".draggable").draggable({ 
 
    helper: "clone", 
 
    revert: "invalid" 
 
}); 
 
$(".droppable").droppable({ 
 
    drop: function(event, ui) { 
 
    $(this).attr("src", ui.draggable.attr("src")); 
 
    } 
 
});

img { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.draggable { 
 
    background: hotpink; 
 
    float: left; 
 
} 
 
.droppable { 
 
    float: right; 
 
    background: dodgerblue; 
 
}

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
<img class="draggable" src="http://i49.tinypic.com/28vepvr.jpg" /> 
 
<img class="droppable" src="" alt="Drop Here!" />