我如何統一2拖放圖像？

我有2個CSS類，左側屏幕的右側，我需要把它們togheter，這些類中我有一個看起來像一個謎圖片：我如何統一2拖放圖像？

通過從右邊拖動圖片到左邊下降時，必須適合左側的圖像。我讀到的拖放，但沒有找到類似的東西:( 我已經試過

編輯：http://postimg.org/image/je31ptb6d/（這是我的pictures.On頂部的例子被分離出作爲類圖片 - 類=「左」對於CA和類=「右」爲nă.On底部是圖像後，我把圖像從右到左從一個。我的問題是如何指定正確的拖放區，使圖像看起來像鏈接後，我下降圖像從右側）

JS/jQuery的？

// shuffle function for right side only 

$(document).ready(function() { 
var a = $(".right > img").remove().toArray(); 
for (var i = a.length - 1; i >= 1; i--) { 
    var j = Math.floor(Math.random() * (i + 1)); 
    var bi = a[i]; 
    var bj = a[j]; 
    a[i] = bj; 
    a[j] = bi; 
} 
$(".right").append(a); 
    }); 

// drag and drop 

$(function() { 
    $(".right img").draggable 
    ({ 
     cursor: 'move', 
     revert: 'invalid', 
    }); 
    $(".left img").droppable({ 
     tolerance: 'fit', 
    }); 
    });

HTML：

<div class="left"> 
<img class="piese" id="piesa1" src="images/Text_1.svg" /> 
<img class="piese" id="piesa2" src="images/Text_2.svg" /> 
<img class="piese" id="piesa3" src="images/Text_3.svg" /> 
<img class="piese" id="piesa4" src="images/Text_4.svg" /> 
</div> 

<div class="right"> 
<img class="piese" id="piesa5" src="images/Text_5.svg" /> 
<img class="piese" id="piesa6" src="images/Text_6.svg" /> 
<img class="piese" id="piesa7" src="images/Text_7.svg" /> 
<img class="piese" id="piesa8" src="images/Text_8.svg" /> 
</div>

來源

2014-03-19 Proless

「適合」表示它是相同尺寸的目標元素。這與圖像內容的形狀無關。拖放不會對圖像進行幾何分析。 –

有另一個元素，它是每個''周圍的包裝器，並且在該元素上拖放。然後，當你得到一個拖放匹配的一面時，將所有元素從一個包裝器移動到另一個包裝器中，並銷燬空包裝器。現在，當剩下的包裝被移動時，所有連接在一起的塊都會因爲它們在裏面而移動 –

@Diodeus當我說「合適」時，我從兩幅圖像製作另一幅具有不同長度的圖像......類似於圖片1 +圖片2，但我的問題是，左側圖像的右側不是直的，它的曲折和不知道如何在其右側設置放置區來放置圖像 – Proless

要解決你的問題，你必須建立一個網格並使用拖放作爲參考網格的位置的位置。這是給你一個想法的簡單例子。

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
#grid{ 
    background-color: #09F; 
    height: 130px; 
    width: 390px; 
    position:relative; 
    margin:100px auto; 
} 
.square{ 
    height: 128px; 
    width: 128px; 
    border:1px solid #999; 
    float:left; 
} 
#first-image{ 
    position: absolute; 
    left: 0px; 
} 
#second-image{ 
    position: absolute; 
    right: 0px; 
} 
</style> 
</head> 
<body> 
<!--take two images by 120px with this class and id --> 
<div id="grid"> 
    <img class="dr" id="first-image" src="your-image.png" width="128" height="128"> 
    <img class="dr" id="second-image" src="your-image.png" width="128" height="128"> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     for(xx = 0; xx < 3; xx++) { 
      $("#grid").append($('<div class="square"></div>')); 
     }; 
     $('.dr').on("dragstart", function (event) { 
      var dt = event.originalEvent.dataTransfer; 
      dt.setData('Text', $(this).attr('id')); 
     }); 
     $('div.square').on("dragenter dragover drop", function (event) {  
      event.preventDefault(); 
      if (event.type === 'drop') { 
       var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id')); 
       de=$('#'+data).detach(); 
       var x = $(this).position().left; 
       var y = $(this).position().top; 
       de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this)); 
      }; 
     }); 
    }); 
</script> 
</body> 
</html>

來源

2014-03-19 17:15:05 Devima

很好的例子，我會嘗試它爲我的項目。謝謝 – Proless

我如何統一2拖放圖像？

回答

相關問題