Question

修改

经过更多研究，我更好地理解了这个问题：

我需要从他们的父div中分离出一个img的克隆，并将这些克隆附加到一个新的div（＃dm-montagem）。

这些都没有奏效：

$(ui.helper).detach().appendTo('#dm-montagem');

$(ui.draggable).detach().appendTo('#dm-montagem');

原始提问：

首先，我真的是javascript和jquery的新手。我学到的一切都是在互联网上，经过反复试验。我有一个用jquery制作的拖放装扮游戏。您可以在此处查看：http://dolls.com.br/dollmaker-sereias-2/

此代码运行良好。我希望游戏更加精致，所以我添加了标签来分隔衣服（即头发，衬衫，连衣裙等）。

问题是：如果我克隆一个选项卡内的img并将其拖动到虚线区域，当我更改选项卡时图像会消失。它仅在我单击img的原始选项卡时再次显示。我该如何防止这种情况发生？我尝试在虚线区域添加“droppable”函数，并将.addClass“active”添加到放在那里的imgs，但它没有用。
要明确：我需要将imgs从所有选项卡拖到虚线区域，我需要克隆的imgs在更改标签时仍然显示。

如果你有一个解决方案，使用标签系统的另一个代码我就可以了！

出于某种原因，JS小提琴不起作用。您可以在此处查看当前代码（和问题）：http://dolls.com.br/dollmaker-hot-love-drama/

非常感谢!!

Tabs JS：

function openCategoria(evt, categName) {
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(categName).style.display = "block";
evt.currentTarget.className += " active";
};  
</script>

拖放JS：

<!-- SCRIPT dollmaker: drag, drop -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="ftp://dolls.com.br@dolls.com.br/public/http_docs/wp-content/themes/dolls2016/js/jQuery_UI_Touch_Punch0-2-3.js"></script>
<script>
jQuery(document).ready(function($) {
$(document).ready(function () {

//Add draggable class to all images
$("img").addClass("draggable");

//Make element draggable
$(".draggable").draggable ({ helper: 'clone'}, {cursor: 'move'}, {stack:"img"})

        .on('drag', function (event, ui) {
            $(this).after (
            $(ui.helper).addClass("removable").draggable ({cursor: 'move'},{stack: "img"}));

})
        .on('dragstop', function (event, ui) {
            $(this).after (
            $(ui.helper).clone().draggable ({cursor: 'move'},{stack: "img"}));

});


//Make UNdraggable
$( ".static" ).draggable( "disable" );

//Trash
$(function() {
$(".stack").draggable();

$('#trash').droppable({
    accept:".removable", drop: function(event, ui) {
        $(ui.draggable).remove();
    }
});
});

});

});

</script>

Answer 1

问题是：如果我克隆一个选项卡内的img并将其拖动到虚线区域，当我更改标签时，图像消失。它只是单击img的原始选项卡时再次显示。我该如何防止这种情况从发生？

这是因为当您在选项卡中克隆img时，默认情况下此选项卡将成为克隆img的父级。因此，当您隐藏此选项卡时，其子元素也会隐藏为避免这种情况，您可以使用appendTo选项：http://api.jqueryui.com/draggable/#option-appendTo：

$(".draggable").draggable ({
   appendTo: '$#dm-montagem',
   helper: 'clone',
   cursor: 'move',
   stack:"img"
})

Answer 2

你可以这样做：

$('#dm-montagem').droppable({
  drop: function(ev, ui) {
    $item = $(ui.helper).clone();
    $item.appendTo($(this));
  }
});

Online demo (jsFiddle)

Answer 3

如果它可以帮助别人，这就是我提出的解决方案。我改变了整个代码，但它现在有效！

之前，您必须单击并拖动原始图像才能拖动克隆。现在，您只需要单击原始文件，克隆就会出现在可放置区域中。这样我就可以将可放置区域作为克隆的父级，现在您可以更改选项卡，并且克隆仍可以重新显示。

//Add original class to all images
$("img").addClass("original");

//Click to duplicate on DM-Montagem
$(".original").click(function() {
$( this ).clone().appendTo( "#dm-montagem" ).removeClass("original").addClass("draggable")

//Make Dragabble
.draggable({cursor: 'pointer'}, {stack:"img"})
});

拖放分离并附加CLONE

3 个答案: