jQuery UI Draggable and Droppable

У меня есть галерея div, и у меня есть два droppable div, и у меня есть проблема с перетаскиванием элемента из одного droppable div в другой droppable div. Когда я перетаскиваю элемент drop в другой droppable div, он всегда возвращается к его droppable div. Может кто-нибудь мне помочь? Кто угодно?jQuery UI Draggable and Droppable

Вот мой пример кода, плюс jsFiddle: http://jsfiddle.net/2n0bevxo/159/

Код:

CSS:

#gallery { 
float: left; 
width: 65%; 
min-height: 11em; 
} 
.gallery.custom-state-active { 
background: #eee; 
} 
.gallery li { 
float: left; 
width: 96px; 
padding: 0.10em; 
margin: 0 0.4em 0.4em 0; 
} 
.gallery li img { 
width: 100%; 
cursor: move; 
} 
#trash { 
float: left; 
width: 32%; 
min-height: 10em; 
padding: 1%; 
display: block; 
margin: 0.3em; 
} 
#trash2 { 
float: left; 
width: 32%; 
min-height: 10em; 
padding: 1%; 
display: block; 
margin: 0.3em; 
} 
h1 { 
font-size: 1em; 
text-align: center; 
}

ЯШ:

$(function() { 
// variable 
var $gallery = $("#gallery"), 
    $trash = $("#trash"); 

$("li", $gallery).draggable({ 
    revert: "invalid", // 
    helper: "clone", 
    cursor: "move" 
}); 

$('#trash').droppable({ 
    accept: "#gallery > li, #trash2 > ul > li", 
    activeClass: "ui-state-highlight", 
    drop: function (event, ui) { 
     deleteImage(ui.draggable); 
    } 
}); 

var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off'</a>"; 

function deleteImage($item) { 
    $item.fadeOut(function() { 
     var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash); 

     $item.find("a.ui-icon-trash").remove(); 
     $item.append(recycle_icon).appendTo($list).fadeIn(function() { 
      $item.animate({ 
       width: "48px" 
      }) 
       .find("img") 
       .animate({ 
       height: "36px" 
      }); 
     }); 
    }); 
} 
}); 

$(function() { 
// variable 
var $gallery = $("#gallery"), 
    $trash2 = $("#trash2"); 

$("li", $gallery).draggable({ 
    revert: "invalid", // 
    helper: "clone", 
    cursor: "move" 
}); 

$('#trash2').droppable({ 
    accept: "#gallery > li, #trash > ul > li", 
    activeClass: "ui-state-highlight", 
    drop: function (event, ui) { 
     deleteImage(ui.draggable); 
    } 
}); 

var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off'</a>"; 

function deleteImage($item) { 
    $item.fadeOut(function() { 
     var $list2 = $("ul", $trash2).length ? $("ul", $trash2) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash2); 

     $item.find("a.ui-icon-trash").remove(); 
     $item.append(recycle_icon).appendTo($list2).fadeIn(function() { 
      $item.animate({ 
       width: "48px" 
      }) 
       .find("img") 
       .animate({ 
       height: "36px" 
      }); 
     }); 
    }); 
} 
});

HTML:

<div class="ui-widget ui-helper-clearfix"> 
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> 
    <li class="ui-widget-content ui-corner-tr"> 
     <img src="http://placehold.it/140x100" width="96" height="72"> 
    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <img src="http://placehold.it/140x100" width="96" height="72"> 
    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <img src="http://placehold.it/140x100" width="96" height="72"> 
    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <img src="http://placehold.it/140x100" width="96" height="72"> 
    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <img src="http://placehold.it/140x100" width="96" height="72"> 
    </li> 
</ul> 
</div> 
<div id="trash" class="ui-widget-content"> 
<h1 class="ui-widget-header">Disagree</h1> 

</div> 
<div id="trash2" class="ui-widget-content"> 
<h1 class="ui-widget-header">Agree</h1> 

</div>

источник

2015-05-16 Jom Nillasca

Вы должны изменить свой accept (пример http://jsfiddle.net/2n0bevxo/166/):

$('#trash').droppable({ 
    accept: "#gallery > li,#trash2 > ul > li", 
    activeClass: "ui-state-highlight", 
    drop: function (event, ui) { 
     deleteImage(ui.draggable); 
    } 
}); 

$('#trash2').droppable({ 
    accept: "#gallery > li,#trash > ul > li", 
    activeClass: "ui-state-highlight", 
    drop: function (event, ui) { 
     deleteImage(ui.draggable); 
    } 
});

Обратите внимание, что я определил для каждой сбрасываемой области принять элементы из его братьев и сестер

источник

2015-05-18 01:58:00

jQuery UI Draggable and Droppable

ответ

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