拖放，使拖放假

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示例，而不是真正的im使用的代码，因为它非常大。

<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

这是最新的小提琴。

步骤：

我拿了你的HTML，抄进了最新的小提琴的顶端。

我在可拖式的周围添加了一个'holder‘div，这样你就可以看到它了。

所有的内联命令和样式都被删除，样式被放置在CSS中(只需查看元素的“class”，转到CSS一侧，并根据您的喜好更改一条或多条行，就可以轻松地在样式中进行更改)。

这两个‘下拉’图像不是放在div中的图像，而是作为'background‘到div，并与background-size大小。

JS甚至没有被碰过。

Now，jQuery:的解释

前三行：

通过将.dragme元素放入jQuery .draggable命令的选择器部分，使其具有可拖动性。

使用helper：.draggable命令修改了.draggable命令，该命令在拖动时克隆.draggable元素--原始元素没有被拖动。

第二组线：

通过使.dropme1元素成为可下垂命令的选择器而使其可下垂。

.droppable命令是用drop:修改的，它将在删除掉的元素后运行函数。

该函数有两行：

第一行只是将拖放元素附加到可下垂元素。

第二行将类.doneme添加到可拖放元素中，这样当我在链的下一段中从类.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');        
                     }
                         });