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复制到了最新的小提琴的顶端。

我在draggable周围添加了一个'holder'div，只是为了让你看到它。

删除了所有内嵌命令和样式，并将样式放在CSS中（只需查看元素的'class'，即可进入CSS方面，轻松更改样式）并根据自己的喜好改变一行或多行。

这两个“dropme”图片并未作为div中的图片放置，而是作为div的“background”放置，并使用background-size调整大小。

JS甚至没有碰过。

现在，解释jQuery：

前三行：

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

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

第二组线：

使.dropme1元素成为droppable命令的选择器，使其成为可放置的。

使用.droppable修改了drop:命令，当在droppable元素上删除某些内容时，该命令将运行该函数。

该功能有两行：

第一行只是将可拖动元素附加到droppable元素。

第二行将类.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');        
                     }
                         });

拖放，使拖拽虚假

1 个答案: