перетащить Scr изображение в другое Scr изображение

Question

Как перетащить и падение с 1 по IMAGE 2

HTML

IMAGE 1

<img height="42" width="42" src="//swnaws.com/widget/v2/upload/x_141.png"> 

IMAGE 2

<span class="holder" style="background-image: url(&quot;//swnaws.com/wi/a_37.png&quot;);"></span> 

Я попытался это

$("img[src*='x_141.png']").draggable.addClass("holder"); 

Answer 1

Хорошо, что вы пытались до сих пор не имеет смысла (вам нужно больше исследований), так что вы слишком далеко от цели. Но я проведу вас простым примером и ссылками на необходимую документацию.

Во-первых, вам нужны jQuery и jQuery UI (этот последний имеет методы перетаскивания и droppable). Вы можете найти последние версии: Google CDN.

После того, как у вас есть эти требования, увидеть этот простой пример:

$(function(){ 

    // make the image draggable, use a clone if you want to maintain the original image 
    $('img').draggable({ helper: 'clone' }); 

    // set up and control the droppable 
    $('.holder').droppable({ 
     accept: 'img', 
     drop: function(event, ui){ /* on drop, retrieve the image src and set it to the target's bg */ 
      var img_src = $(ui.helper).attr('src'); 
      $('.holder').css('background', 'red url(' + img_src + ') no-repeat center center'); 
     } 
    }); 

}); 

Вот живой пример, так что вы можете начать оттуда: https://jsfiddle.net/re1xwsm3/.

Кроме того, спокойно прочитайте как jQuery UI Draggable Documentation, так и jQuery UI Droppable Documentation, чтобы правильно понять, как это работает.