Drag & Drop-scr Bild in ein anderes scr Bild

Question

Wie kann ich per Drag & Drop IMAGE 1 auf BILD 2

HTML

BILD 1

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

BILD 2

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

Ich habe versucht, diese

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

Answer 1

Ok, was man hat versucht, so weit keinen Sinn (Sie brauchen mehr Forschung), so sind Sie zu weit weg von Ihrem Ziel. Aber ich führe Sie durch ein einfaches Beispiel und verlinke auf die benötigte Dokumentation.

Zuerst benötigen Sie jQuery und jQuery UI (das letzte hat die ziehbare und Droppable-Methoden). Die neuesten Versionen finden Sie unter Google CDN.

Sobald Sie diese Anforderungen haben, finden Sie in diesem einfachen Beispiel:

$(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'); 
     } 
    }); 

}); 

Hier ist das Live-Beispiel, so dass Sie von dort beginnen kann: https://jsfiddle.net/re1xwsm3/.

Lesen Sie ruhig beide jQuery UI Draggable Documentation und jQuery UI Droppable Documentation, um richtig zu verstehen, wie es funktioniert.