I build a project something like "trip planner" but I need to add on my cloned div-object an verticl line on left border with css:
.line
{ width:5px, height:200px; background:red;}
so to be something like this (you can see on hover an vertical line)
I was try to do this with code:
$(function() {
//$( ".draggable" ).resizable();
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7
});
$( "#drop_here td" ).droppable({
// accept only from left div,
// this is necessary to prevent clones duplicating inside droppable
accept: '#left .draggable',
drop: function( event, ui ) {
// 4 append clone to droppable
$( this ).append(
// 1 clone draggable helper
$(ui.helper).clone()
// 2 make the clone draggable
.draggable({
containment:"#table",
snap: "#drop_here td"
})
// 3 make the clone resizable
.resizable());
//HERE IS MY PROBLEM IN CODE
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).removeClass("line");
});
}
});
});
but dont work!
DEMO
The first problem is that your css has a , insted of a ;
.line {
display: none;
width: 5px;
height: 200px;
background: red;
}
Then for the jquery modify like this:
$('.draggable').hover(function(){
$(this).find('.line').show();
}, function() {
$(this).find('.line').hide();
});
In your markup place a .line (only one) just after every .draggable, but not on hover or it will append it every time you hover the .draggable creating tons of .lines
JSfiddle : http://jsfiddle.net/steo/JB7jN/1/
You have to bind the .hover() in the document ready like this:
$(document).ready(function(){
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).children('.line').remove();
});
});
Your "hover out" handler removes the class from $(this) -- not from the appended child.
It's probably bad practice to dynamically create elements on hover, that are never deleted & will presumably gradually fill the document with garbage.
if you only want to add the line to the clone add the start property to the draggable options like this:
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7,
start: function(event, ui){
var clone = $(ui.helper);
if (clone.children('div.line').length == 0)
clone.append("<div class='line'></div>");
}
});
Tested this and it works like a charm.. Dont forget to remove this part:
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).removeClass("line");
});
Related
I have dragable element in my html. and jQuery is like this
$( ".block-33a" ).sortable({
revert: true
});
$( ".hidden_drag" ).draggable({
revert: true,
stop: function(event,ui){
//some code
}
});
by using this u can able to get my element back to the default place but it should be invincible while it is reverting. how do i do it?
UPDATE
this is my fiddle http://jsfiddle.net/Q2h2w/46/
and it will say my requirement too
I have updated the fiddle. Please have a look at it.
I have added the mouseup event to detect mouse release. Hope that will solve your purpose:
http://jsfiddle.net/Q2h2w/56/
var count=0;
$('.button_area').draggable({
revert: true,
drag: function(){
count++;
},
stop: function(event,ui){
$('.button_area').off("mouseup");
$(this).show();
},
start: function( event, ui ) {
$('.button_area').on("mouseup",function(){
$(this).hide();
});
}
});
I want to dynamically create a draggable div on mousedown, which within the same mousedown event can then be dragged into a droppable area and dropped.
The point that I have got to so far is that a new draggable div is created on mousedown and that div then follows the cursor. But it cannot be dropped into the droppable area.
JS Fiddle here - http://jsfiddle.net/rqyv6bpg/
The jQuery code:
jQuery(document).ready(function ($) {
//on mousedown, creates a new draggable div in the cursor position
$(".search-result-container").mousedown(function(e){
var x = e.pageX + 'px';
var y = e.pageY + 'px';
$('<div/>', {
"class": "test",
text: "Draggable track that can be dropped into droppable queue!",
}).css({
"position": "absolute",
"left": x,
"top": y,
"z-index": 1000
}).draggable()
.appendTo($(document.body))
});
//in order to get the newly created div to instantly follow the cursor
$(document).on('mousemove', function(e){
$('.test').css({
left: e.pageX,
top: e.pageY
});
});
$( "#queue-bar" ).droppable();
});
Help would be greatly appreciated! Thanks in advance.
If I understood correctly, you are looking for the helper option of draggable widget.
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: "clone", // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
}
});
});
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: "clone", // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
}
});
});
.search-result-container {
background-color: red
}
#queue-bar {
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>
You can also create a custom helper by returning an element to be used as helper as shown below:
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: function(){
// return a custom element to be used for dragging
return $("<div/>",{
text: $(this).text(),
class:"copy"
})
}, // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
//you might want to reset the css using attr("style","")
ui.helper.clone().appendTo(this); // actually append a clone of helper to the droppable
}
});
});
.search-result-container {
background-color: red;
}
#queue-bar {
background-color: blue;
}
.copy{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>
Updated your fiddle, it works now!!
http://jsfiddle.net/rqyv6bpg/2/
Here is the JS code:
$( ".text" ).draggable({helper:'clone'});
$( "#queue-bar" ).droppable({
drop: function( event, ui ) {
$( this ).append( "<br/>"+ui.draggable.html() );
}
});
I got some div's which are sortable etc.. But they got all the same classes, so if I drag one, all the contents of the div's are hiding. I want to get 'id' of the div i'm dragging, and put it into hide and show function.
It should be like this..
jQuery code:
$("#column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
.click(function() { // I know it is wrong but it should be like this
var id = $(this).attr('id')
}
$('id').hide();
},
stop: function() {
.click(function() { // same
var id = $(this).attr('id')
}
$('id').show();
}
});
EDIT: Example my problem: fiddle
Please let me know if this is something you were looking for:
JavaScript Code
$("#column-left, #column-middle, #column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
$(this).find('.contents').hide();
},
stop: function() {
$(this).find('.contents').show();
}
});
$(".sort").disableSelection();
In general, $(this).find('.contents') will be exactly the child element (content) which you are dragging.
Also, I have merged your 3 identical methods into 1 avoiding duplicates and any mess in the code.
Basically what I have is a set of doodads, and what I need to do is to be able to drag any item in that set into a containment box. Once they are in the box, they can still be moved around and manipulated freely, but they can't be taken out of the box again though they can be deleted.
The doodads are also set to clone as a user can have more than one of the item in the box if they so desire.
So the two parts are, set up the doodad list (already done), and then make it draggable so that it can be dragged into the droppable div box. Then the second part is that once it's in the div box, it must be draggable again, not clonable, and also contained in the box.
Here's my JS code:
$(document).ready(function() {
function MakeDraggable(item) {
item.draggable({
revert : "invalid"
});
}
$(".doodad").draggable({
helper : 'clone',
scroll : true
});
$(".dropped").draggable ({
containment: ".box"
});
$(".box").droppable({
accept : ".doodad",
activeClass : "ui-state-default",
hoverClass : "ui-state-hover",
drop : function(event, ui) {
var droppedItem = $(ui.draggable).clone();
//droppedItem.class = ".dropped";
droppedItem.draggable();
//ui.draggable.draggable('option', 'revert', false);
//droppedItem.draggable();
$(this).append(droppedItem);
}
});
});
I've tried many things. I tried changing the element's ID to something else so that it can take on that class' draggable attributes. I've also tried programming it within the drop function, but I'm having issues.
I have no idea how to refer to the draggable element just dropped in order to manipulate it. I was told it was $(ui.draggable), or $(ui.draggable).clone(), but when I try referring to that and calling draggable on it with my desired options, it doesn't work. The best I've gotten was that it was draggable after dropping, but it kept duplicating itself and was not contained within the box.
Any help would be greatly appreciated, and I am new to all of this stuff. I did look at the JQuery API but it didn't help me much in this regard.
Edit:
My Html is:
<body>
<img src="doodads/i1.gif" class="doodad">
<img src="doodads/i2.gif" class="doodad">
<img src="doodads/i3.gif" class="doodad">
<img src="doodads/i4.gif" class="doodad">
<div class="box" />
</body>
CSS is:
.box {
width:500px;
height:500px;
background: orange;
}
You can set a class on the dropped element e.g. copied and than check if the dropped element have already that class and if so stop the cloning.
To constrain the movement inside the box you can use containment option of draggable:
Constrains dragging to within the bounds of the specified element or
region.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied');
droppedItem.draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/ufHMm/
EDIT
To get the dropped element position we had to calculate and use it, using:
$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left
we get the helper position along its container.
Final code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/ufHMm/3/
I made a quick drag and drop type menu. Basically I made it so you drag an item from a list into the trash div, and it will give you an alert saying "gone"
I want to make it so that you can't just drag the item anywhere. It has to go into the trash or ".list4" it's called, or else send it back to it's original position.
Here is the JSFiddle: http://jsfiddle.net/Gdze8/
Here is the Javascript:
$( init )
function init() {
$(".contentItem").draggable();
$(".list4").droppable( {
drop: handleDropEvent
});
}
function handleDropEvent ( event, ui ) {
var draggable = ui.draggable;
alert("Gone")
}
Also, while I'm here, would there be a way to delete the item once it goes in the "trash"?
Try this
$(".contentItem").draggable({ revert: 'invalid' });
JS Fiddle Demo
use :
$( ".draggable" ).draggable({ revert: "invalid" });
to get it back to its original position.
use:
$( "#dorp" ).droppable({
accept: ".draggable",
drop: function( event, ui ) { ui.draggable.remove(); }
});
to remove an element dropped.
HERE IS A DEMO : jsfiddle
AND YOU CAN USE { helper: "clone" } : jsfiddle2