我的拖放取消功能（弹出式），当我第二次尝试时不起作用（JQUERY）

Question

I got two div's. One with the class "drophere" and one with "dragehere". the class "drophere" is the dropbox and "dragehere" is the draggable item. when I swap two div's you get the question if you want to swap or to cancel your'e action. the swap function work's fine, But when I cancel my swap both div's will go back to the original position.

But the problem is: when I do a second attempt to swap two item's the div's I first canceled will finish the action and if one div was also used in the first attempt it even disappear. I hope someone can help me

 $(document).ready(function() { window.startPos = window.endPos = {}; makeDraggable(); $('.drophere').droppable({ hoverClass: 'hoverClass', drop: function(event, ui) { $(".pop").css("display", "block"); var $from = $(ui.draggable), $fromParent = $from.parent(), $to = $(this).children(), $toParent = $(this); window.endPos = $to.offset(); swap($from, $from.offset(), window.endPos, 0); swap($to, window.endPos, window.startPos, 0, function() { $toParent.html($from.css({ position: 'relative', left: '', top: '', 'z-index': '' })); $fromParent.html($to.css({ position: 'relative', left: '', top: '', 'z-index': '' })); makeDraggable(); }); } }); function makeDraggable() { $('.draghere').draggable({ zIndex: 999, revert: 'invalid', start: function(event, ui) { window.startPos = $(this).offset(); } }); } //document.getElementById("panel").style.display = "block"; function swap($el, fromPos, toPos, duration, callback) { $("#no").click(function() { $(".pop").css("display", "none"); //doesn't work $(".draghere").css({ "top": "", "left": "", "z-index": " " }); }); $("#yes").click(function() { $(".pop").css("display", "none"); $el.css('position', 'absolute') .css(fromPos) .animate(toPos, duration, function() { if (callback) callback(); }); }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pop"> <div class="pop-up"> <input type="button" id="yes" value="Replace image and short request"> <input type="button" id="img" value="Replace image only "> <input type="button" id="no" value="Cancel"> </div> </div> <div class="drophere"> <div class="image-container draghere"> <img src="img/jpg/img.jpg" class="drag-img" /> <p>Order Specifications(1)</p> <div class="trash-bin"> <a href="#">Edit</a> </div> </div> </div> <div class="drophere"> <div class="image-container draghere"> <img src="img/jpg/img.jpg" class="drag-img" /> <p>Order Specifications(1)</p> <div class="trash-bin"> <a href="#">Edit</a> </div> </div> </div> <div class="drophere"> <div class="image-container draghere"> <img src="img/jpg/img.jpg" class="drag-img" /> <p>Order Specifications(1)</p> <div class="trash-bin"> <a href="#">Edit</a> </div> </div> </div> 

Answer 1

I think because you swap the content, the eventhandlers are lost. So you need to call makeDraggable again. I translated the example to pure javascript, makes it a bit clearer what is happening and what the solution should be. Also I left out the images, so copying this into a html should work. There is also a pen: https://codepen.io/SnoepGames/pen/yvGyez

window.addEventListener("load", function(){

/* more info about dragging and dropping..:
    https://www.html5rocks.com/en/tutorials/dnd/basics/
*/

var flying_effect=document.getElementById("flying_effect");
flying_effect.style.display="none";
var pop=document.getElementById("pop");
document.getElementById("yes").addEventListener("click",yes);
document.getElementById("img").addEventListener("click",swapImg);
document.getElementById("no").addEventListener("click",no);

// Set up all drag and drop listeners..
makeDraggable();

/* called when user clicks img in popup */
function swapImg()
{
    // we just swap the image, without a flying effect.

    // let's get the data we stored in flying_effect
    var data=JSON.parse(flying_effect.getAttribute("data"));
    console.log(data);

    // we just copy content from one to the other and vice versa..
    var parent1=document.getElementById(data.dragged_parent_id);
    var parent2=document.getElementById(data.drop_id);
    html1=parent1.innerHTML;
    html2=parent2.innerHTML;
    parent1.innerHTML=html2;
    parent2.innerHTML=html1;

    // if we do it this way, we build up the html again and we erase the dragging and dropping event listeners..
    // because we destroy the original objects.. (and rebuild them elsewhere)
    makeDraggable(); // this resets the event listeners..

    pop.style.display="none"; // hide pop;
}

/* called when user clicks short in popup */
function yes()
{
    // we want a flying effect to swap the image..
    // first let's get the original image invisible again..
    // let's get the data we stored in flying_effect
    var data=JSON.parse(flying_effect.getAttribute("data"));
    data.target="endpoint";
    data.counter=0;
    var parent1=document.getElementById(data.dragged_parent_id);
    var parent2=document.getElementById(data.drop_id);
    var object1=document.getElementById(data.dragged_id);
    var object2= parent2.children[0]; // the first child assuming there is only 1 thing in the drop zone to fly to..
    data.startPoint={};
    data.startPoint.x=parent1.getBoundingClientRect().left; // according to stylesheet, there is a margin of 15px!
    data.startPoint.y=parent1.getBoundingClientRect().top;
    data.endPoint={};
    data.endPoint.x=parent2.getBoundingClientRect().left; // according to stylesheet, there is a margin of 15px!
    data.endPoint.y=parent2.getBoundingClientRect().top; // according to stylesheet, there is a margin of 15px!
    data.x=data.startPoint.x;
    data.y=data.startPoint.y;

    flying_effect.setAttribute("data",JSON.stringify(data));// opslaan

    // hide object 1
    // now we fill the flying effect with the content of 1 and start the fly loop!
    flying_effect.style.display="block";
    flying_effect.style.backgroundColor="#f00";// show it is JUST an effect..
    flying_effect.style.position="absolute";
    flying_effect.style.left=data.x+"px";
    flying_effect.style.top=data.y+"px";
    flying_effect.innerHTML=parent1.innerHTML; // copy the HTML!
    object1.style.opacity=0;
    pop.style.display="none"; // hide pop;
    fly();
}
/* called when user clicks no in popup */
function no()
{
    // we don't need to do anything..
    pop.style.display="none"; // hide pop;
}

/* the flying effect loop*/
function fly()
{
    // get the data..
    var data=JSON.parse(flying_effect.getAttribute("data"));
    if(data.counter<25)
    {
        // flying..
        data.counter++;
        var target=data.endPoint;
        if(data.target=="startpoint")
        {
             target=data.startPoint;
        }
        data.x=data.x*0.9+0.1*target.x;
        data.y=data.y*0.9+0.1*target.y;
        flying_effect.style.left=data.x+"px";
        flying_effect.style.top=data.y+"px";
    }else{
        // arriving
        if(data.target=="endpoint")
        {
            console.log("we arrived at the second image..");
            // we arrived at the first.. make the swap
            var parent2=document.getElementById(data.drop_id);
            var html1=flying_effect.innerHTML;
            var html2=parent2.innerHTML;
            flying_effect.innerHTML=html2;
            parent2.innerHTML=html1;
            console.log(html1);
            console.log(html2);
            data.counter=0;
            data.target="startpoint";
        }else{
            console.log("we arrived back at the first..");
            // we arrived back where we started..
            // swap out the contents
            var parent2=document.getElementById(data.dragged_parent_id);
            parent2.style.opacity=1;
            var html1=flying_effect.innerHTML;
            var html2=parent2.innerHTML;
            flying_effect.innerHTML=html2;
            parent2.innerHTML=html1;
            data.target="none"; // target="none" will stop the animation loop!

            // hide the flying_effect.
            flying_effect.style.display="none";

            // we build up the html again and we erase the dragging and dropping event listeners..
            // because we destroy the original objects.. (and rebuild them elsewhere)
            makeDraggable(); // this resets the event listeners for a second round.
        }
    }
    // set the data back..
    flying_effect.setAttribute("data",JSON.stringify(data));// opslaan

    // loop this function until all exchanges were made.
    if(data.target!="none") 
        window.requestAnimationFrame(fly);
}

/* handler function for dragging */
function handleDragStart(e)
{
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.dropEffect="move";
    var data={};
    e.currentTarget.style.opacity=0.1; // we make the dragged image disappear.
    data.dragged_id=e.currentTarget.id;
    data.dragged_parent_id=e.currentTarget.parentNode.id;
    e.dataTransfer.setData('text/html', JSON.stringify(data));
    console.log("startDrag of: "+e.currentTarget);
}

/* handler function for dropping */
function handleDrop(e)
{
    console.log("Drop of: "+e.currentTarget);
     if (e.stopPropagation) {
        e.stopPropagation(); // stops the browser from redirecting.

    var data=JSON.parse(e.dataTransfer.getData('text/html'));   
    data.drop_id=e.currentTarget.id;
    document.getElementById(data.dragged_id).style.opacity=1; // we put back the origin, which we hid for effect..
    flying_effect.setAttribute("data",JSON.stringify(data)); // we save all we are doing in flying_effect attr data.

    // show de popup!
    pop.style.display="block"; // show the popup to let the user decide

    return false;
  }
}
/* find all eligible divs in document and add eventListeners */
function makeDraggable() 
{
    var draggable_divs=document.getElementsByClassName("draghere");
    for(var i=0;i<draggable_divs.length;i++)
    {
        var d=draggable_divs[i];
        d.id="draggable_object"+i;
        d.addEventListener("dragstart",handleDragStart,false);
        d.addEventListener("dragover",function(e)
        { 
            // dit zorgt ervoor dat we kunnen droppen (anders kapen de draggables onze events!)
            if (e.preventDefault) {     e.preventDefault();   }
        },false);
    }
    var dropzones=document.getElementsByClassName("drophere");
    for(var i=0;i<dropzones.length;i++)
    {
        var d=dropzones[i];
        d.id="dropzone"+i;
        d.addEventListener("drop",handleDrop,false);        
    }
}
});