#jquery #jquery-ui #jquery-ui-draggable
#jquery #jquery-пользовательский интерфейс #jquery-пользовательский интерфейс-перетаскиваемый
Вопрос:
У меня есть список перетаскиваемых значков PNG, которые можно поместить в область над div тем, что их содержит. Содержимое div используется .animate для скольжения вниз, для сворачивания, при нажатии кнопки табуляции.
Когда я перетаскиваю изображение из нижнего контейнера, помещаю его на страницу выше, а затем щелкаю, чтобы свернуть нижний контейнер, удаленное изображение также анимируется вниз. Он остается прикрепленным к исходному списку.
Как я могу отделить перетаскиваемые элементы от основного списка после удаления, при этом все еще позволяя перемещать их перетаскиванием (и, возможно, возвращать обратно в нижний контейнер, если не требуется)?
Моя структура списка в контейнере / лотке:
<div class="BottomToolsTray">
<div class="IconsTrayTab">
<div>
<a href="#"><img src="images/contract_btn.png" class="OpenIconsBtn" data-toggleon="images/contract_btn.png" data-toggleoff="images/expand_btn.png" border="0" /></a>
</div>
<div class="IconsTrayLabel">
Icons Tray
</div>
</div>
<div class="TextLabelsTab">
Text Labels
</div>
<div class="ArrowsTab">
Arrows
</div>
<div class="IconsPanelBox">
</div>
</div>
<div class="IconGraphics">
<ul class="clear">
<li class="item" data-id="1">
<a href="#">
<img src="images/Complex.png" alt="Complex">
</a>
</li>
<li data-id="2">
<a href="#">
<img src="images/Simple.png" alt="Simple">
</a>
</li>
<li data-id="3">
<a href="#">
<img src="images/2_3rd_IT_spend.png" alt="">
</a>
</li>
</ul>
</div>
И вот моя часть Javascript
<script>
//Instructions Min/Max buttons
$(document).ready(function(){
//Icons Tray Min/Max buttons
$(".OpenIconsBtn").on('click',function(){
if($(this).attr('src')==$(this).data('toggleon')){
$(this).attr('src',$(this).data('toggleoff'))
$(".BottomToolsTray").animate({"top":"57.3%"},500, function() {
//$(".IconGraphics").show();
$(".IconGraphics").fadeIn(100);
});
//SLIDE UP TOP BAR WHEN TOOL EXPANDED
$(".instructions").slideUp(300);
$(".ToptoggleBtn").attr('src',$(".ToptoggleBtn").data('toggleoff'))
}else{
$(this).attr('src',$(this).data('toggleon'))
$(".IconGraphics").fadeOut(80);
$(".BottomToolsTray").animate({"top":"579px"},500);
}
});
});
//!-------------------------JQuery DRAG FUNCTION---------------------------------------//
$(function () {
// jQuery UI Draggable
$(".IconGraphics li").draggable({
revert:false,
drag:function () {
$(this).addClass("active");
$(this).closest(".IconGraphics").addClass("active");
},
// removing the CSS classes once dragging is over.
stop:function (event, ui) {
$(this).removeClass("active").closest(".IconGraphics").removeClass("active");
}
});
$(".PageArea").droppable({
tolerance:"touch",
drop:function (event,ui) {
var draggable = ui.draggable;
var id = draggable.attr("data-id");
}
});
});
</script>
И вот мой JSFiddle.
Вот обновление… Теперь это работает в IE 9, за исключением того, что удаленные объекты привязываются к верхнему левому краю, когда я хочу, чтобы они просто падали там, где они были отброшены. Проблема с lerger заключается в том, что после переключения на использование помощника и клонирования перемещение объектов, которые были удалены, перестало работать на iPad. Кто-нибудь может предложить помощь, чтобы исправить это? Я не уверен, что это конфликт js с сенсорным управлением или проблема в моем коде, которая не нравится iPad.
Here's what I have:
Top of script for js
<head>
<link rel="stylesheet" href="js/master.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="AppContainer">
<div class="WhiteboardList">
</div>
<div class="IconGraphics">
<ul class="clear">
<li>
<a href="#">
<img src="images/Complex.png" alt="Complex">
</a>
</li>
<li>
<a href="#">
<img src="images/Simple.png" alt="Simple">
</a>
</li>
<li>
<a href="#">
<img src="images/2_3rd_IT_spend.png" alt="">
</a>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
var clone;
var a = 1;
$(".IconGraphics li").draggable({
helper: 'clone',
cursor: 'hand'
});
$(".WhiteboardList").droppable({
accept: ".IconGraphics li",
// hoverClass: 'dropareahover',
tolerance: 'pointer',
drop: function(event, ui)
{
var dropElemId = ui.draggable.attr("id");
var dropElem = ui.draggable.html();
clone = $(dropElem).clone(); // clone it and hold onto the jquery object
clone[0].id = "newId" [a ];
var newObject = clone[0].id;
newObject.id = "newObject";
$('#newId').css('position', 'absolute');
$('#newId').css('float', 'left');
//
clone.draggable({
containment: 'parent',
cursor: 'crosshair',
stack: 'div',
zIndex: '2500',
});
$(this).append(clone);
}
});
});
</script>
Комментарии:
1. вы пробовали клонировать элемент после его удаления и заменять текущий элемент клонированным?
2. Привет, Аджит, спасибо за ваш ответ. Я поиграл с помощником и клонировал, но не смог заставить его работать, а также сделать так, чтобы клонированный элемент можно было перемещать, после удаления или перетаскивать обратно в лоток / контейнер, если в этом нет необходимости. Я смог прикрепить перетаскиваемый элемент к другому div на экране при удалении и удалить его из исходного контейнера div, но опять же, его нельзя переместить или переместить обратно в исходный контейнер. Вроде как застрял здесь.
3. Ну, я подозреваю, что причина, по которой вы не можете выбрать клонированный элемент, заключается в проблемах с селектором. Попробуйте выбрать его следующим образом
$( document ).on( "ready", "<your id or class>", function() { //Do stuff });4. Спасибо Adjit. Как вы можете сказать, я довольно новичок в jQuery. Я попробовал это с помощью моего метода добавления перетаскиваемого объекта к родительскому, но все еще не могу переместить перемещаемый объект при перетаскивании. Будет ли ваш предложенный выше код работать только с решением для клонированных объектов? Сталкивались ли вы с какими-либо хорошими примерами того, что я пытаюсь сделать? ДО сих пор я не нашел ничего подобного, поэтому я начинаю задаваться вопросом, возможно ли это.
5. Привет, Аджит… Мне удалось заставить метод clone работать в IE, но теперь он перестал работать на iPad при перемещении удаляемого объекта.