Question

我有两个div。一个班级＆＃34; drophere＆＃34;和＃34; dragehere＆＃34;。班级＆＃34; drophere＆＃34;是Dropbox和＆＃34; dragehere＆＃34;是可拖动的项目。当我换掉两个div时，你会得到一个问题，如果你想交换或取消你的行动。交换功能很好，但当我取消交换时，两个div都将返回原来的位置。

但问题是：当我第二次尝试交换两个项目时，我首先取消的div将完成动作，如果在第一次尝试中也使用了一个div，它甚至会消失。我希望有人可以帮助我

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我认为因为您交换了内容，所以事件处理程序会丢失。所以你需要再次调用makeDraggable。我将这个例子翻译成了纯粹的javascript，让它更清楚地发生了什么以及解决方案应该是什么。另外我省略了图像，因此将其复制到html应该可行。还有一支笔：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);        
    }
}
});

拖放时我的取消功能（弹出窗口）当我第二次尝试它时没有（JQUERY）

1 个答案: