拖動一個elemt intobox和使用jquery

刪除另一個在同一時間，我用jQuery拖動一個elemt intobox和使用jquery

我想拖和圖像放到一個盒子我有4個圖像的問題，但我只想要一個圖像拖放到框中，如果我們添加另一個圖像框第一個圖像回到原來的位置我想這個使用jQuery拖放功能。

[

的jQuery（「拖動」）拖動（{ 還原：函數（下降）{

  var draggable = jQuery(this), 
      hasBeenDroppedBefore = draggable.data('hasBeenDropped'), 
      wasJustDropped = dropped && dropped[0].id == "stage-a"; 
     if(wasJustDropped) { 
      // don't revert, it's in the droppable 
      return false; 
     } ]

Refrance頁http://www.premierprotein.com/protein-101

來源

2017-04-24 Saurabh Chauhan

你試過的一些示例代碼？ – ThatAwesomeCoder

確定我添加了請檢查 –

編輯您的文章並粘貼代碼並格式化請。 – ThatAwesomeCoder

好了，你可以試試這個，我使用jQuery版本進行測試1.8.3 & jquery-ui 1.9.1

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Swap elements</title> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
    <style> 
    .droppable { 
     float: left; 
     margin-left: 100px; 
     width: 200px; 
     height: 50px; 
     border: 1px solid red; 
     padding: 5px; 
    } 

    .draggable { 
     width: 200px; 
     height: 50px; 
     background: yellow; 
     text-align: center; 
     line-height: 50px; 
    } 
    .ui-draggable-dragging { 
     background: blue; 
    } 

    .hoverClass { 
     border: 2px solid red; 
    } 
    </style> 
</head> 
<body> 
    <div class='droppable'> 
    <div class="draggable">Draggable 1</div> 
    </div> 

    <div class='droppable'> 
    <div class="draggable">Draggable 2</div> 
    </div> 
</body> 
</html>

JAVASCRIPT

$(document).ready(function() { 
     window.startPos = window.endPos = {}; 

     makeDraggable(); 

     $('.droppable').droppable({ 
     hoverClass: 'hoverClass', 
     drop: function(event, ui) { 
      var $from = $(ui.draggable), 
       $fromParent = $from.parent(), 
       $to = $(this).children(), 
       $toParent = $(this); 

      window.endPos = $to.offset(); 

      swap($from, $from.offset(), window.endPos, 200); 
      swap($to, window.endPos, window.startPos, 1000, function() { 
      $toParent.html($from.css({position: 'relative', left: '', top: '', 'z-index': ''})); 
      $fromParent.html($to.css({position: 'relative', left: '', top: '', 'z-index': ''})); 
      makeDraggable(); 
      }); 
     } 
     }); 

     function makeDraggable() { 
     $('.draggable').draggable({ 
      zIndex: 99999, 
      revert: 'invalid', 
      start: function(event, ui) { 
      window.startPos = $(this).offset(); 
      } 
     }); 
     } 

     function swap($el, fromPos, toPos, duration, callback) { 
     $el.css('position', 'absolute') 
      .css(fromPos) 
      .animate(toPos, duration, function() { 
      if (callback) callback(); 
      }); 
     } 
    });

希望這有助於以某種方式。

來源

2017-04-24 11:43:54 ThatAwesomeCoder

你有任何參考網站 –

請讓我知道它的工作熱 –

拖動一個elemt intobox和使用jquery

回答

相關問題