I have a simple drag n drop it is working fine as I expected
but,
Problem:
The only problem is the elements are appending
What I want:
I don't want to append the elements I just want that when I drag n drop the element
they appear as normally happen.
My Code:
$( "#editorDesignView" ).droppable({
accept: '.textTemplate',
drop: function( event, ui ) {
var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">'+ui.draggable.text()+'.</p></div>';
$(html).appendTo(this).hide().slideDown();
}
});
Here is my fiddle.
UPDATE:
I don't want to remove or want the same element as in left side. I just want that when I drop the element I can drop it anywhere
UPDATED FIDDLE:
Fiddle. Please check the console for the result. I want the result to be printed on droppable are without appending it.
you want a same representation on right column, as in left. And you can drop in anywhere at right column.
$(function(){
$(".textTemplate").draggable({
helper: "clone",
zIndex: 2500,
});
$( "#editorDesignView" ).droppable({
accept: '.textTemplate',
drop: function( event, ui ) {
console.log(ui.draggable.text(), event, ui);
var html = '<div>'+ui.draggable.text()+'</div>';
$(html).appendTo(this).hide().slideDown();
}
});
});
Here is my fiddle
Related
Hello I need to turn the cursor into a crosshair while the user drags a button. The code below is not working:
$("button").draggable('cursor','crosshair');
To achieve this you can use cursor property of the draggable library, like this:
$("#draggable").draggable({
cursor: 'crosshair'
});
Alternatively, if you want to set a custom cursor through CSS you would need to use the start and end events of the jQuery draggable library to change the CSS cursor property of the ui.helper. Try this:
$("#draggable").draggable({
start: function(e, ui) {
ui.helper.addClass('dragging');
},
stop: function(e, ui) {
ui.helper.removeClass('dragging');
}
});
.dragging { cursor: url('http://i.imgur.com/6r4pI7U.png'), crosshair; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="draggable">
<p>Drag me</p>
</div>
From the jQuery UI docs https://api.jqueryui.com/draggable/
$( ".selector" ).draggable({
cursor: "crosshair"
});
Or if it is already initialized
$( ".selector" ).draggable( "option", "cursor", "crosshair" );
See here https://jsfiddle.net/W4Km8/9844/
Picture:
<div id="grid-wrapper">
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
</div>
I want to change class on two divs when I drop my span, and remove draggable.
I have this:
$( ".dragandrop" ).draggable({ snap: "#grid" });
$("#grid").droppable({
drop: function( event, ui ) {
$( this )
.addClass( "droped" )
}
});
This code add me .droppable only on first div, and doesn't add class "droped", I can't do removing .draggable. Can you help me?
First off, be careful using the same id for multiple elements. It can cause really weird issues (see this post).
Second, make sure you add the draganddrop class to the appropriate elements that you want to, well, drag and drop.
And you want to removed the draggable on an element once you dropped it? I think what you want looks something like this:
$( ".dragandrop" ).draggable({
snap: ".dragandrop" ,
stop: function(event, ui){
$( this ).addClass( "droped" );
$( this ).draggable( 'disable' );
}
});
$(".dragandrop").droppable({});
div{
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="grid-wrapper">
<div id="grid1" style="background:orange;" class="dragandrop">a</div>
<div id="grid2" style="background:red;" class="dragandrop">b</div>
<div id="grid3" style="background:green;" class="dragandrop">c</div>
<div id="grid4" style="background:yellow;" class="dragandrop">d</div>
</div>
You may also want to add in some logic to keep the active div on top.
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 not new to code here, but this is my first question on SO, so if my etiquette is off excuse me just this once. I've looked around for support on this, and it doesn't seem many people are running into this problem.
I'm playing with jQuery-UI for the dragging and dropping elements, and for the most part it's working fine. However when I drag something from a 'tabbed' div into a droppable area it jumps a couple hundred pixels below it. It's especially odd because I've got it set to revert it's position on an invalid drop, and that's working, but it ignores this rule on the first drop that makes it jump. I'm not sure if this is something in the CSS position style, or if I'm not setting my UI attributes correctly.
http://www.putoutsystems.com/jtest/
Hit the consumables tab > drag the item into the bin. You should see the behavior I'm describing. I'm using jQuery 1.10.2 and jQuery UI 1.10.4
This is all the code for the app:
<link href="css/pepper-grinder/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<style>
#potion { width: 24px; height: 24px; position:relative;}
#tabs { width: 500px; height: 100px;}
#droppable { width: 500px; height: 100px;}
.inventoryTab { height: 40px; }
</style>
<!-- libraries -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<!--functions -->
<script>
//functions
$(function() {
//Dragable Elements
$( ".draggable" ).draggable({ revert: "invalid"});
//Hover Text
$( document ).tooltip();
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
}
});
//Tab Interface
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<!-- Inventory tabs-->
<div id="tabs">
<ul>
<li>Equipment</li>
<li>Consumables</li>
<li>Items</li>
</ul>
<div id="tabs-1" class="inventoryTab" >
</div>
<div id="tabs-2" class="inventoryTab" >
<div id="potion" class="draggable">
<img src="sprites/potion.png" alt="potion" title="Minor Health Potion">
</div>
</div>
<div id="tabs-3" class="inventoryTab" >
</div>
</div>
<br>
<!-- The Bin --->
<h1>The BIN</h1>
<div id="droppable" class="ui-widget-header">
<p>Empty!</p>
</div>
UPDATE: I've come up with a bandaid solution that sets an exact position, that I suppose I could change using variables based on how many objects are in the bin. Check our this code for droppable event:
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
$(ui.draggable).css({
'top': '10px',
'left': '10px'
});
}
});
I'd prefer it if the object got the mouse position when it was dropped, but that's where my jQuery is failing me right now. I'll keep looking.
JSFIDDLE
It seems like you don't need this line $(ui.draggable).appendTo($(this));
//functions
$(function () {
//Dragable Elements
$(".draggable").draggable({
revert: "invalid"
});
//Hover Text
$(document).tooltip();
//droppable elements
$("#droppable").droppable({
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("FULL!");
//$(ui.draggable).appendTo($(this)); // comment this out
}
});
//Tab Interface
$("#tabs").tabs();
});
JSFIDDLE DEMO
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");