拖放，使可拖動錯誤

Question

我知道這已經發布了一百萬遍了，但是我對JQuery並不了解很多，也無法將我從其他問題中找到的解決方案應用於我的問題，甚至無法提出自己的解決方案。 而且由於我很絕望，因為這個項目決定了我是否可以通過高中，所以我會盡可能地將其發布。

我將盡力解釋這一點，但請記住，英語不是我的母語，所以有些東西可能沒有意義。

因此，我有3張圖像，其中一張是可拖動的，另一張是不可拖動的，基本上，當我將一張可以拖動到另一張的圖像拖動到另一張2時，它會將目標圖像替換為新的一張，但是那么我可以繼續拖動該圖像並替換另一幅圖像，而我需要那不可能。 另外，當圖像不再存在時，我無法將圖像的原始div拖動以消失。

這是我擁有的腳本

function allowDrop(ev) {
 ev.preventDefault();
}

function drag(ev) {
 ev.dataTransfer.setData ("src", ev.target.id);
}

function drop(ev) {
 ev.preventDefault ();
 var src = document.getElementById (ev.dataTransfer.getData ("src"));
 var srcParent = src.parentNode;
 var tgt = ev.currentTarget.firstElementChild;
 ev.currentTarget.replaceChild (src, tgt);
}

這是一個HTML示例，不是真正使用的代碼，因為它確實很大。

<div style="width: 150px; height: 150px;">
    <img src="img/DraggableImg.png" class="img" draggable="true" ondragstart="drag(event)" id="drag1"/>
</div>
<div style="width: 150px; height: 150px;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="img/NotDraggableImg1.png" class="img"/>
</div>
<div style="width: 150px; height: 150px;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="img/NotDraggableImg2.png" class="img"/>
</div>

還要注意的另一件事是，一旦我第二次拖動圖像，就無法將其拖動回去，這並不是很重要。

好，謝謝您的時間。

Answer 1

這是最新的FIDDLE 。

腳步：

我拿了您的HTML並將其復制到最新的小提琴的頂部。

我在可拖動對象周圍添加了一個“ holder ” div，以便您可以看到它。

刪除了所有內聯命令和樣式，並將樣式放置在CSS中（只需查看元素的“ class ”，轉到CSS端，然后更改一個或多個樣式，即可輕松進行樣式更改。根據您的喜好排列）。

這兩個“ dropme”圖像不是作為div中的圖像放置，而是作為div的“ background ”放置，並使用background-size 。

JS甚至沒有被感動。

現在，對jQuery進行說明：

前三行：

通過將.dragme元素放入jQuery .draggable命令的選擇器部分，可以將其拖動。

.draggable命令已通過輔助程序進行了修改：clone會在拖動時克隆.draggable元素-不會拖動原始元素。

第二行：

通過將.dropme1元素設置為droppable命令的選擇器，可以將其設置為可放置。

.droppable命令已使用drop:修改drop:當將某些內容放置在droppable元素上時，它將在其后運行該函數。

該函數有兩行：

第一行只是將draggable元素追加到droppable元素。

第二行將.doneme類.doneme到draggable元素中，因此當我在鏈的下一部分中從其刪除類.dragme時，它可以具有相同的樣式。 如果刪除.dragme類，則該元素將不再是可拖動的。

第三組命令與第二組命令完全相同，只是標識符不同。

社論： jQuery具有陡峭的學習曲線，但是一旦您玩了一段時間，您將學習編寫幾乎所有jQuery命令的基礎知識：

$('yourselector').jquery command( something and/or function(){});

在研究文檔后，“某物”或“功能”的內容具有相當清晰的結構-您應該花很多時間使用jsfiddle進行一系列的jQuery實驗。

這是典型的jQuery命令的“復雜”偽代碼：

$('.yourclassselector').yourjquerycommand('something', function(e, u){
                                                width: 100,
                                                height: 100,
                                                waistcircumference: 44,
                                                priceofm&ms: 6.0,
                                                costofOracle: 3000000,
                                                thendothis: function(e,m){
                                                                          alert('yoyo');
                                                                          }
                                                                      })
                                                                        .done(function(){
                                                                                         alert('I'm gone');
                                                                                         });
                                                                       });

JS

$('.dragme').draggable({
                        helper: 'clone'
                        });

$('.dropme1').droppable({
    drop: function(){ 
                     $('.dropme1').append( $('.dragme') );
                     $('.dragme').addClass('doneme').removeClass('dragme');
                     }
                         });
$('.dropme2').droppable({
    drop: function(){ 
                     $('.dropme2').append( $('.dragme') );
                     $('.dragme').addClass('doneme').removeClass('dragme');        
                     }
                         });