Функция клонирования Jquery создает дублированное изображение при перетаскивании?

Я работаю над приложением перетаскивания, используя jQuery.Функция клонирования Jquery создает дублированное изображение при перетаскивании?

Однако проблема в том, что когда я перетаскиваю изображения, они дублируют изображения.

Я попытался удалить данный класс следующим образом: ui.helper.removeClass("draggable");

, но я все еще вижу образ дублируется, и я не понимаю, что вызывает эту проблему.

Это весь мой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <style type="text/css"> 
     body 
     { 
      font-family: Arial; 
      font-size: 10pt; 
     } 
     #dvSource img 
     { 
      height: 100px; 
      width: 100px; 
      margin: 2px; 
     } 
     .draggable 
     { 
      filter: alpha(opacity=60); 
      opacity: 0.6; 
     } 
     .dropped 
     { 
      position: static !important; 
     } 
     #dvSource, #dvDest 
     { 
      border: 5px solid #ccc; 
      padding: 5px; 
      min-height: 100px; 
      width: 430px; 
     } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script> 
    <link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" 
     type="text/css" /> 
    <script type="text/javascript"> 
     $(function() { 
      $("#dvSource img").draggable({ 
       revert: "invalid", 
       refreshPositions: true, 
       drag: function (event, ui) { 
        ui.helper.addClass("draggable"); 
       }, 
       stop: function (event, ui) { 
        ui.helper.removeClass("draggable"); 
        var image = this.src.split("/")[this.src.split("/").length - 1]; 
        if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) { 
         //alert(image + " dropped."); 
        } 
        else { 
         alert(image + " not dropped."); 
        } 
       } 
      }); 
      $("#dvDest").droppable({ 
       drop: function (event, ui) { 
        if ($("#dvDest img").length == 0) { 
         $("#dvDest").html(""); 

        } 
        ui.helper.removeClass("draggable"); 
        ui.draggable.addClass("dropped"); 
        //$("#dvDest").append(ui.draggable).clone(); 
        $("#dvDest").append($(ui.draggable).clone()); 






       } 
      }); 
     }); 
    </script> 
    <div id="dvSource"> 
     <img alt="" src="images/Chrysanthemum.jpg" /> 
     <img alt="" src="images/Desert.jpg" /> 
     <img alt="" src="images/Hydrangeas.jpg" /> 
     <img alt="" src="images/Jellyfish.jpg" /> 
     <img alt="" src="images/Koala.jpg" /> 
     <img alt="" src="images/Lighthouse.jpg" /> 
     <img alt="" src="images/Penguins.jpg" /> 
     <img alt="" src="images/Tulips.jpg" /> 
    </div> 
    <hr /> 
    <div id="dvDest"> 
     Drop here 
    </div> 
</body> 
</html>

может кто-то пожалуйста, сообщите по этому вопросу?

источник

2015-02-15 TERO

добавить оригинал и не клонировать его? – charlietfl

@charlietfl, мне нужно клонировать его, чтобы он не очистил его от исходного div «dvSource». – TERO

ui.draggable уже является объектом jQuery. Вам не нужно обертывать его в $ (ui.draggable) снова – nanndoj

Проблема заключается в том, что функция вызывается дважды здесь:

if($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) { 
....

JQuery уже называют падение, но вы вызываете его снова вручную. Это неправильный способ проверить событие, но он вызывает событие снова. Просто удалите это предложение if...else, что код будет работать как шарм!

Вы также деформируете объект в $(), но объект также является объектом jquery. вам не нужно это делать

// NOT $("#dvDest").append($(ui.draggable).clone()); 
$("#dvDest").append(ui.draggable.clone());

источник

2015-02-15 13:22:05 nanndoj

Ты мужчина. :) – TERO

Функция клонирования Jquery создает дублированное изображение при перетаскивании?

ответ

Смежные вопросы