I currently have some jquery draggable objects which are located in a content slider which has multiple pages. These objects are dragged out of the content slider pages and into an 'answer' box which is located outside the slider. This works up until you change pages in the content slider, the answers then 'disappear' out of the answer box until you return to the page in the slider that they were originally on. I need to find a way to create a 'copy' of the draggable object that will stay in the answer box even when the page changes in the slider.
After doing some research I found the helper: clone option but can't seem to get it to stay in the answer box once it's been cloned. Another option I looked at was moving the draggable to a new container using 'appendTo' outside the slider once it had been dropped in the answer box - this again came with it's own problems. I really don't know what to do any more with this after having spent multiple hours trying to fix it!
The code and a screenshot are below... thanks in advance!
Javascript/jQuery
// initialisation for all things regarding the drag and drop.
function init_dragDrop(){
// setup draggable interface
$(".answer").draggable({ snap: ".destinationBox", snapMode: "inner", revert: "invalid"});
$( ".destinationBox" ).droppable({
drop: function( event, ui ) {
var matchedQuestion = null;
var droppedQuestion = $(this).prevAll(".question:first").html();
$.each(questionList, function(){
if(this.body === droppedQuestion){
matchedQuestion = this;
return false;
}
});
var draggedAnswer = $(ui.draggable[0]);
matchedQuestion._onCorrect = function(){draggedAnswer.css("backgroundColor", "green"); questionList[++currentQuestion].enable();}
matchedQuestion._onIncorrect = function() {
draggedAnswer.css("backgroundColor", "red");
//resets answer to original position in the runbook, and revoves red background color
$("#reset").click(function () {
draggedAnswer.animate({
backgroundColor: "transparent",
top: "0px",
left: "0px"
});
});
}
HTML
<div id="questionDiv">
<div class="question textbox" id="q1">1. Assemble the Crisis Management Team</div><div class="destinationBox"></div>
<div class="question textbox" id="q2">i. Set up the emergency conference line</div><div class="destinationBox"></div>
</div>
<div class="content-switcher" id="answerDiv3" >
<h2>Key Contacts</h2>
<table>
<tr>
<td><p><strong>Contact</strong></p></td>
<td><p><strong>Telephone Number</strong></p></td>
<td><p><strong>Email Address</strong></p></td>
</tr>
<tr>
<td><p>Managing Director</p></td>
<td><div class="dragDropSmallBox answer a1">0123456789</div></td>
<td><div class="dragDropSmallBox answer a2">M.D#acme.com</div></td>
</tr>
</table>
</div>
Screenshot
Related
I have been given a piece of code that allows the user to drag one row of a table to a div. I have been asked to allow the user to select multiple rows and drag them all to the div. I've been trying to modify the code I was given to do what I need it to do.
So, I have a table of rows, where the first column of each row contains a drop down box. I want the user to be able to select many check-boxes, and be able to drag all the rows corresponding to those checked check-boxes into another containing a table.
I managed to get the dragging part to work - the user is able to check many check-boxes, and its shows a group of rows being dragged. However, when I drop these rows, only one row in being dropped. Can anyone help me drop all the rows being dragged. Here is my code:
$(oTable.fnGetNodes()).draggable({
appendTo: "#event",
cursor: "move",
helper: function (event) {
var checkBoxes = $(".drag");
var rows = $('#lotsDataTable tr').filter(':has(:checkbox:checked)');
if (checkBoxes.length > 0) {
return $('<div class="dragContainer"><table></table></div>').find('table').append(rows.clone()).appendTo('#event');
} else {
return $('<div class="dragContainer"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).appendTo('#event');
}
}
});
$("#event table").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not()",
drop: function (event, ui) {
$(this).find(".placeholder").remove();
$("<tr></tr>").html(ui.draggable.html()).appendTo(this);
ui.draggable.draggable({ disabled: true });
}
});
This is the HTML that I want to drop to:
<div id="event">
<div class="datatable clearboth">
<table id="addLots" class="dataTable clearboth">
<tr class="placeholder" style="width: 100%">
<td style="height: 80px;">
Drag and drop rows here to add them to this event
</td>
</tr>
</table>
</div>
</div>
Only your helper has the modified content, the original draggable still only contains the original draggable. You can try dumping the helper's contents into your new <tr>:
$("<tr></tr>").html(ui.helper.html()).appendTo(this);
i'm just trying to drag a clone of a image to div once its dropped then i want that clone to be draggable and resizable but with containment in that div only. When i make cloned image its working fine se here Jfiddle!!.
HTML
<div class="option" id="f">
<img class="options" src="http://lorempixel.com/90/90/" alt=""/>
</div>
<div class="lame">
<img src="http://placehold.it/350x150" alt=""/>
</div>
Jquery
$(function() {
$( ".options" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"
});
$(".lame").droppable({ accept:".options",drop: function(event, ui) {
$.ui.ddmanager.current.cancelHelperRemoval = true;
$(".ui-draggable").hover(function() {
$(this).addClass('fix');
$(this).draggable({containment: ".lame"});
}, function() {
$(this).removeClass('fix');
});
}
});
});
but when add resizable to it the draggable stops working and image moves down. you can see it here Link . Also on fiddle image didn't move down see !!
but draggable is also not working here also. please tell me how to fix this or either do this in correct way using latest Jquery-ui Version.
I was just looking into your request from the previous question and I saw that you had asked a new question.
Here is what I came up with.
HTML
<div class="option" id="f" style="display:inline-block;">
<img class="options" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpqrkAF5pPbe8N9fko9gLyZalAyeSm4p-dyU72YD3FuvmDHCW4" alt=""/>
</div>
<br>
<div class="lame" style="display:inline-block;">
<img src="http://placehold.it/350x150" alt=""/>
</div>
Notice the style="display:inline-block;" this is important so that your .option and .lame div's do not span accross the whole screen.
jQuery
$(function() {
$( ".option" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"});
$(".lame").droppable({
accept:".option",drop: function(event, ui) {
$.ui.ddmanager.current.cancelHelperRemoval = true;
$(ui.helper).draggable({cursor : "pointer",opacity: 0.6,containment :".lame"});
$(ui.helper).find('.options').resizable({containment : ".lame"});
}
});
});
Instead of calling .draggable on .options we are calling it on .option the container div.
Once the image has been dropped in .lame we need to make .option (or div) draggable. And the .options or image re sizable. Seems to work pretty good when we do it this way.
Take a look at the example.
http://jsfiddle.net/7kkW3/2/
In your hover event, try making the parent draggable instead of the img itself.
When the jquery ui makes an img tag resizable it wraps it inside another div causing some problems.
$(".ui-draggable").hover(function()
{
$(this).addClass('fix');
$(this).parent().draggable({containment: ".lame"});
$(this).resizable({containment: ".lame"});
}
I am using jquery ui sortable with connected lists. I have 2 problems with one most important requirement.
Items goes behind the other list while dragging li.ui-splitselect-item
Dragging item to right(when mouse is too right) creates Horizontal scroll
IMPORTANT: Lists ul.ui-splitselect-list should have overflow-y:auto; So Header of lists stay fixed
and only list items are scrolled
NOTE:
I previous asked this question on STACKOVERFLOW but didnt notice my important requirement was missing from solution so i opened question again with clarity.
JSFIDDLE: http://jsfiddle.net/bababalcksheep/z67Td/
HTML Mockup:
<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content" style="height:200px;" >
<div class="ui-widget-content ui-splitselect-selected">
<div class="ui-widget-header ui-helper-clearfix">
List1
</div>
<ul id="sortable1" class="ui-splitselect-list" style="height: 332px;">
<li class="ui-splitselect-item ui-state-default">
<a class='ui-splitselect-handle-drag'><span class='ui-icon ui-icon-carat-2-n-s'></span></a>
<span class="ui-splitselect-handle-select">TEST-List1</span>
<a class="ui-splitselect-handle-move" href="#"><span class="ui-icon ui-icon-plus"></span></a>
</li>
</ul>
</div>
<div class="ui-widget-content ui-splitselect-available" >
<div class="ui-widget-header ui-helper-clearfix">
List2
</div>
<ul id="sortable2" class="ui-splitselect-list" style="height: 332px;">
</ul>
</div>
</div>
CSS:
.ui-splitselect{font-size:.8em;width:100%!important;text-align:center;margin:0 auto;padding:0}
.ui-splitselect ul{-moz-user-select:none}
.ui-splitselect .ui-widget-header{border:none;font-size:11px}
.ui-splitselect-selected{height:100%!important;float:left;border:none;width:50%;margin:0;padding:0}
.ui-splitselect-available{height:100%!important;width:49.4%;float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0}
.ui-splitselect-list{height:92%!important;position:relative;list-style:none;overflow:auto;margin:0;padding:0}
.ui-splitselect-item{cursor:default;line-height:20px;height:20px;font-size:11px;list-style:none;display:list-item;white-space:nowrap;overflow:hidden;margin:1px;padding:0}
.ui-splitselect-item.ui-sortable-helper{z-index:99999}
.ui-splitselect-handle-select{float:left}
.ui-splitselect-handle-drag{float:left;height:20px;border-top:0;border-bottom:0;cursor:pointer;margin:0 10px 0 5px;padding:2px 5px}
.ui-splitselect-handle-move{text-decoration:none;cursor:pointer;float:right;height:20px;border-top:0;border-bottom:0;margin:0 5px 0 10px;padding:2px 5px}
JS:
$("#sortable1, #sortable2").sortable({
connectWith: ".ui-splitselect-list",
containment: ".ui-splitselect",
scroll: false,
placeholder: "ui-state-highlight ui-splitselect-item"
}).disableSelection();
Try adding appendTo: document.body and helper: clone options for sortable, like this:
$("#sortable1, #sortable2").sortable({
appendTo: document.body,
helper: "clone",
connectWith: ".ui-splitselect-list",
containment: ".ui-splitselect",
scroll: false,
placeholder: "ui-state-highlight ui-splitselect-item"
}).disableSelection();
Js fiddle: http://jsfiddle.net/XpP25/2/
Trick is in creating sorting helper that clones your original element, and then appending it to body element to resolve zIndex issues. All helpers are automatically removed after stop event of draggable and sortable, so it shouldn't mess your code :)
Hope it helps.
I was having a similar issue with nested sortable items. I have multiple sortable containers, that make up a grid, then widgets inside of those sortable containers. Inside of each widget there is a nested sortable container which takes up the width and height. Inside of the nested sortables I can have multiple nested-widgets, spanning the width of the nested sortable.
Here is how one of those sortables would look:
<div class="sortable">
<div class="widget">
<div class="nested-sortable">
<div class="nested-widget"></div>
</div>
</div>
</div>
Now, once I started dragging my nested sortable item, it would go behind every outer widget except for the one containing it. I tried changing the z-index of the items on sort start and no luck. I needed something like jQuery UI's Draggable stack option, which "stacks" the currently dragged item over all other items of the same class.
Here is jQuery UI's draggable stack function on github at line 800.
So, my friend and I modified that code a bit, and called it on the "outer" widget.
$.fn.stack = function () {
// where $(this) == '.widget'
var o = $(this).closest('.sortable').siblings('.sortable').find('.widget');
// create an array of all the widgets
var group = $(o).sort(function(a,b) {
// compare the each set of widgets
return (parseInt($(a).css("z-index"),10) || 1) - (parseInt($(b).css("z-index"),10) || 1);
});
if (!group.length) { return; }
var min = parseInt($(group[0]).css('z-index')) || 1; // first widget's z-index
$(group).each(function(i) {
// increase each widget's z-index by min + $(this) widget's index value
$(this).css('z-index', min + i);
});
// make currently dragged widget's z-index min + length of group
$(this[0]).css('z-index', min + group.length);
}
Then call in sortable start:
$('.nested-sortable').sortable({
start: function(event, ui) {
$(this).closest('.widget').stack();
}
});
Here is my codepen for reference: Nested Grid System
I'm working with Jquery UI draggable and droppable.
I have a container that accepts all the divs of the .category1 class, and what I have to do is:
If I put a div into the container that already has another div, revert the old div back to the
original position.
This is the code I have:
$(document).ready(function () {
$(function () {
$("#Part1").draggable({ revert: "invalid", snap: "#Part1Container", snapMode: "inner"
});
$("#Part1Container").droppable({
accept: ".category1",
drop: function (event, ui) {
//Some other logic
}
}
});
And the Html
<div id="Part1" class="ui-widget-content category1"></div>
<div id="Part2" class="ui-widget-content category1"></div>
I want the Part1 to be back to the original position if I insert Part2 in the container, and viceversa. And this has to work for n divs of the same class.
Any suggestions?
Tnx in advance :)
I solved it by assigning it a class when it goes into the container the first time, and then delete it when moving another div
$(".inCategory2").animate({
top: 0,
left: 0
}).removeClass("inCategory2");
ui.draggable.addClass("inCategory2");
I'm trying to make my first Firefox extension, that replaces the new tab page with a more Chrome-like tab page. one of the features is tiles of your "most visited sites," that you can drag-and-drop to reorder. I have them dragging and dropping, but I have no idea how to save the new locations of the DIVs.
This is the script I'm using:
$(document).ready(function(){
jQuery.fn.redswap = function(options){
var selectedItems=this;
redsettings = jQuery.extend({
speed:"Medium",
opacity:0.7
}, options);
$(selectedItems).mouseover(function(){
$(selectedItems).disableSelection();
$(selectedItems).droppable({
drop: function(event, ui) {
dropindex=$(selectedItems).index(this);
var dragposition=$(selectedItems[dragindex]).position();
var dropposition=$(selectedItems[dropindex]).position();
withDifference=parseInt(dragposition.left)-parseInt(dropposition.left);
heightDifference=parseInt(dragposition.top)-parseInt(dropposition.top);
$(selectedItems[dropindex]).animate({
left:'+='+withDifference,
top:'+='+heightDifference
},redsettings.speed,function(){
});
$(selectedItems[dragindex]).animate({
left:'+='+(withDifference*(-1)),
top:'+='+(heightDifference*(-1))
},redsettings.speed,function(){
//Complete
});
},
});
$(this).draggable({
opacity:redsettings.opacity,
helper: 'clone',
containment: 'parent',
scroll: false,
drag:function(event, ui){
dragindex=$(selectedItems).index(this);
}
});
});
};
});
// Settings
$(document).ready(function(){
$("#wrapper").tabs();
$("div[id*='box']").redswap({
speed:'slow',
opacity:.75
});
});
And this is my HTML:
<div id="1box" class="item">
<a href="http://www.google.com/reader/view"><img src="thumbs/01.png" border="0" />
<h1>Google Reader</a></h1>
</div>
<div id="2box" class="item">
<a href="https://mail.google.com/"><img src="thumbs/02.png" border="0" />
<h1>Gmail</a></h1>
</div>
<div id="3box" class="item">
<a href="http://calendar.google.com/"><img src="thumbs/03.png" border="0" />
<h1>Google Calendar</a></h1>
</div>
<div id="4box" class="item">
<a href="http://www.twitter.com/"><img src="thumbs/04.png" border="0" />
<h1>Twitter</a></h1>
</div>
The HTML isn't final yet, but it does drag and drop. Any idea how I can save the new order of the DIVs, so that when I close out and open it up again, it's the new configuration? If it can't be done with this script, then I'm fine being pointed to a new version.
Keep in mind I'm very very new to JavaScript, so please treat me like I'm an idiot :)
Also, if you're interested in helping me on the coding part of things, send me a message.
It sounds like you're looking for some sort of storage to contain your sequence information.
Three approaches that are applicable to Firefox extensions are discussed in this Stack Overflow question
Either the SQLite or File System option would work well for your application, I think.