I have folders with tooltips such as '0 entries' or '5 entries' and so on. I need this tooltip number to update by 1 every time something is dropped into the folder. The title doesn't always start at zero, and I need $(this) drop div updated, as I have many. Here is the working fiddle http://jsfiddle.net/4ehSG/3
jQuery
$(document).tooltip();
var dropped =0;
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
dropped++;
$( this )
.attr('title',dropped+' entries')
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( ".draggable" ).fadeOut();
}
});
HTML
<div class="draggable ui-widget-content">
<p>Drag me to my target</p>
</div>
<div class="droppable ui-widget-header" title='2 entries'>
<p>Drop here</p>
</div>
Here is an example of what you can do: http://jsfiddle.net/4ehSG/9/
drop: function( event, ui ) {
var dropped = parseInt($(this).attr('title')) + 1;
$( this )
.attr('title',dropped+' entries')
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( ".draggable" ).fadeOut();
}
You could increase a variable every time an element is dropped
try this
$(document).tooltip();
var num = 0;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
num++;
$( "#draggable" ).fadeOut();
$( "#droppable" ).attr("title", num + " entries");
}
});
your updated example: http://jsfiddle.net/4ehSG/4/
If you have multiple instances of droppable and draggable, you may want to give each droppable an array associated with it. That way you don't need to rely on a count object and you could drop the same draggable on multiple droppable objects.
DEMO
$(document).tooltip();
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
if(!$(this).data('droplist')){ //check for array
$(this).data('droplist', []); //if doesn't exist, create array
}
var droplist = $(this).data('droplist'),
drag = $(ui.draggable)[0];
if(droplist.indexOf(drag) === -1) //check if element exists in array
droplist.push(drag);
$( this )
.addClass( 'ui-state-highlight' )
.find( 'p' )
.html( 'Dropped!' )
.end()
.attr('title', droplist.length + ' entries');
$(this).data('droplist', droplist); //set list
}
});
DEMO
$(document).tooltip();
var count = 0;
$("#draggable").draggable();
$("#droppable").droppable({
drop: function (event, ui) {
count++;
$(this)
.attr('title', count + ' entries')
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
$("#draggable").fadeOut();
}
});
You can use:
document.getElementById('droppable').title = value;
The above line of code is without using jQuery.
If you want to use jQuery, use the following:
$("#droppable").attr( 'title', value );
Related
I am trying to implement a behavior for my draggable items.
The behavior is described here :
My box contains multiple draggable items which are sorted on page load
I can drag and item from that box on a drop area
But if I drag it back to the box it should re-place at its original position based on its data-attribute
I have no clue how to achieve this. I saw that sortable could possibly do this but I don't know how to combine it with draggable.
Thank you
HTML
<div class="multiple-drag-area position-sticky sticky-top">
<div class="box" data-position="1">
Item 1
</div>
<div class="box" data-position="2">
Item 2
</div>
<div class="box" data-position="3">
Item 3
</div>
</div>
<div class="drag-area">
Drop 1
</div>
<div class="drag-area>
Drop 2
</div>
<div class="drag-area>
Drop 3
</div>
JS
$( ".box" ).draggable({
scope: 'demoBox',
revert: true,
cursorAt: { top: 40, left: 40 },
revertDuration: 100,
start: function( event, ui ) {
//Reset
$( ".box" ).draggable( "option", "revert", true );
console.log('-');
}
});
$( ".multiple-drag-area" ).droppable({
scope: 'demoBox',
drop: function( event, ui ) {
var area = $(this).find(".area").html();
var box = $(ui.draggable).html()
$( ".box" ).draggable( "option", "revert", false );
//Display action in text
console.log("[Action] <b>" + box + "</b>" + " dropped on " + "<b>" + area + "</b>");
//Realign item
$(ui.draggable).detach().css({top: 0,left: 0, marginRight:4}).appendTo(this);
},
})
$( ".drag-area" ).droppable({
scope: 'demoBox',
drop: function( event, ui ) {
var area = $(this).find(".area").html();
var box = $(ui.draggable).html()
$( ".box" ).draggable( "option", "revert", false );
//Display action in text
console.log("[Action] <b>" + box + "</b>" + " dropped on " + "<b>" + area + "</b>");
//Realign item
$(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
},
accept: function(draggable) {
return $(this).find("*").length-1 == 0 && (!$(this).hasClass("blocked-seat"));
}
})
Something like that should work:
$( ".box" ).draggable({
revert: true,
});
$( ".drag-area" ).droppable({
drop: function( event, ui ) {
$(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
}
});
$( ".multiple-drag-area" ).droppable({
drop: function( event, ui ) {
let box = $(ui.draggable);
// check if Element gets reinserted
// we can check that by confirming the the box parent has the 'drag-area' class
if($(box).parent().hasClass("drag-area")){
$(box).detach().css({top: 0,left: 0}).appendTo(this);
// sort the boxes based on 'data-position'
$(this).find('.box').sort(function( a, b ) {
return a.dataset.position - b.dataset.position;
}).appendTo(this);
}
}
});
I have been trying to put a Draggable element on Droppable element, by jquery ui, and i almost succeded as the code working halfly, if you move a little the elements on the droppable, they are changing their place, and i don't want it to, i want they will stay where they are, but if you drag them outside of the droppable area, they will come back to their natural place.
the code i've done:
HTML:
<div class="cart">
<div class="products on">1</div>
<div class="products on">2</div>
</div>
<div class="products">3</div>
<div class="products">4</div>
<div class="new"></div>
Jquery:
$(function() {
$(".products").draggable({
appendTo: "body",
revert : function(event, ui) {
if($(this).attr("class").split(' ')[1] == 'on') {
$(".new").append($(this)); $(this).removeClass("on"); return !event;
}else{
$(this).data("uiDraggable").originalPosition = {top : 0,left : 0}; return !event;
} },
start: function(event, ui) { ui.helper.data('dropped', false); },
stop: function(event, ui) {
if(!ui.helper.data('dropped')) {
$("#"+$(this).html()).remove();
}
}
});
$(".cart").droppable({
drop: function( event, ui ) {
var text = ui.draggable.html();
$(".cart").append('<div id="'+text+'">'+text+'</div>');
ui.draggable.data('dropped', true);
}
});
});
http://jsfiddle.net/yreKf/8/
just remove destroy draggable on drop event here is working jsfiddle
drop: function( event, ui ) {
var text = ui.draggable.html();
$(".cart").append('<div id="'+text+'">'+text+'</div>');
ui.draggable.data('dropped', true);
$(ui.draggable).draggable({
revert: "invalid"
});
}
This might be the answer you are looking for
http://jqueryui.com/droppable/#revert
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
Working on a Rails tutorial as part of an online course. They suggest using this gem for implementing a live markdown editor. I couldn't get the gem to work so I started inspecting it. The repository is two years old, so I'm not surprised the gem isn't working right off. I followed the installation instructions and the appropriate files are loading, I just don't understand why it's not working.
It would be really convenient if it did work because installation is really simple. The way it's set up, all you have to do after installing the gem, running the rake task and adding uses_markdown_preview to the appropriate controller is add a class "markdown_preview" to the textarea you want to preview.
What should happen is, once you've added the "markdown_preview" class to your text area, a jQuery file executes the function markdownPreview on that class, which creates a kind of control bar with three buttons. An editing button, which is on at default so you can edit the textarea. A preview button, which once you click it should take the input text and render a preview of the text, applying the markdown on the text. And a help button, which once you click, will reveal instructions for how to use markdown.
The first thing I noticed was that the jQuery was using out of date selectors, i.e. .live(). When I changed those to .on(), the jQuery file loaded the buttons I described above, but still none of the events work. I'll post the file below:
(function( $ ){
$.fn.markdownPreview = function( type ) {
return this.each(function() {
var $this = $(this);
$this.wrap( '<div class="markdown_wrap editing"></div>' );
$this.before( '<div class="markdown_wrap_menu"><div class="markdown_wrap_menu_help">Help</div><div class="markdown_wrap_menu_edit">Write</div><div class="markdown_wrap_menu_preview">Preview</div></div>' );
var help_text = [
'<div class="content cheatsheet">',
'<h2>Markdown Cheat Sheet</h2>',
'<div class="cheatsheet-content">',
'<div class="mod">',
'<div class="col">',
'<h3>Format Text</h3>',
'<p>Headers</p>',
'<pre># This is an <h1> tag',
'## This is an <h2> tag',
'###### This is an <h6> tag</pre>',
' <p>Text styles</p>',
' <pre>*This text will be italic*',
'_This will also be italic_',
'**This text will be bold**',
'__This will also be bold__',
'',
'*You **can** combine them*',
'</pre>',
'</div>',
'<div class="col">',
'<h3>Lists</h3>',
'<p>Unordered</p>',
'<pre>* Item 1',
'* Item 2',
' * Item 2a',
' * Item 2b</pre>',
' <p>Ordered</p>',
' <pre>1. Item 1',
'2. Item 2',
'3. Item 3',
' * Item 3a',
' * Item 3b</pre>',
'</div>',
'<div class="col">',
'<h3>Miscellaneous</h3>',
'<p>Images</p>',
'<pre>',
'Format: ',
'</pre>',
'<p>Links</p>',
'<pre>http://github.com - automatic!',
'[GitHub](http://github.com)</pre>',
'<p>Blockquotes</p>',
'<pre>As Kanye West said:',
'> We\'re living the future so',
'> the present is our past.',
'</pre>',
'</div>',
'</div>',
'<div class="rule"></div>',
'</div>',
'</div>' ].join( "\n" );
$this.before( '<div class="markdown_wrap_help">' + help_text + '</div>' );
$this.wrap( '<div class="markdown_wrap_content"></div>' );
$this.after( '<div class="markdown_wrap_preview"></div>' );
$this.wrap( '<div class="markdown_wrap_editor"></div>' );
/*
if ( !type || type == 'width' ) {
$this.width( $this.width() );
}
if ( !type || type == 'height' ) {
$this.height( $this.height() );
}*/
});
};
$( '.markdown_wrap_menu_help' ).live( 'click', function(){
//console.log( 'Clicked Help' );
$( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});
$( '.markdown_wrap_menu_edit' ).live( 'click', function(){
//console.log( 'Clicked Edit' );
$( this ).closest( '.markdown_wrap' ).removeClass( 'previewing' ).addClass( 'editing' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_preview' ).hide();
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_editor' ).show();
});
$( '.markdown_wrap_menu_preview' ).live( 'click', function(){
//console.log( 'Clicked Preview' );
$( this ).closest( '.markdown_wrap' ).removeClass( 'editing' ).addClass( 'previewing' );
var editor = $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_editor' );
var preview = $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_preview' );
preview.html( 'Loading...' );
editor.hide();
preview.show();
var editor_content = editor.find( 'textarea' ).val();
$.ajax({
type: 'POST',
url: '/markdown_preview/convert',
data: { 'format' : 'json', 'markdown_text' : editor_content },
success: function( data, textStatus, jqXHR ){
preview.html( data['html'] );
},
error: function(jqXHR, textStatus, errorThrown){
//console.log( "ERROR" );
//console.log( jqXHR );
//console.log( textStatus );
//console.log( errorThrown );
},
dataType: 'text json'
});
});
})( jQuery );
$( document ).ready( function(){
$( '.markdown_preview' ).markdownPreview();
});
Besides the .live() selectors, what else is wrong with this file? And why does it seem like the code works until it gets to these events, i.e.:
$( '.markdown_wrap_menu_help' ).live( 'click', function(){
//console.log( 'Clicked Help' );
$( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});
I can add code above that first event, like an alert() function, and I've confirmed that will execute, but when I click on any of the buttons, nothing happens.
Figured it out. This:
$( '.markdown_wrap_menu_help' ).live( 'click', function(){
//console.log( 'Clicked Help' );
$( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});
Should be:
$( document ).on('click', '.markdown_wrap_menu_help', function(){
$( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});
I've been focusing mostly on Rails and my jQuery's lacking. If anyone could actually explain why the old code worked in the previous jQuery library and why this change works for the current version, that'd be helpful.
I'm using jquery's drag and drop photo manager, and require some slightly altered functionality.
You can view the eg. in the link below.
http://jqueryui.com/droppable/#photo-manager
What I want to be able to do, is when you drag an image into the drop-zone, instead of fading from the original list, I want to add a class to it.
I can't quite figure out where I need to do this?
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
ui.draggable.addClass('my-new-thing');
var $list = $( "ul", $trash ).length ? $( "ul", $trash ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
ui.draggable.clone().append( recycle_icon ).appendTo( $list ).fadeIn();
}
});
I think you want this
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
ui.draggable.addClass('new1');
}
})
When your element is in drop-zone, you can catch the event with the drop event.
$( ".selector" ).droppable({
drop: function( event, ui ) {
// Add your class here
}
});
More information on http://api.jqueryui.com/droppable/#event-drop
I need to create jQuery drag and drop. when I drop item should make sound, dose anyone know how to do it? I know we can do it with HTML5 audio tag with CSS and jQuery to make it happen but I need a sample code in order to modify it.
$(function() {
$( "#draggable" ).draggable();
// need sound in my droppable
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
// my code
$("div#gameboard div").droppable({
drop: function (event, ui) {
{
sendMessage("m " + this.id + " " +
localToGlobal(imgID) + " " +
$(ui.helper).css("left") + " " +
$(ui.helper).css("top")
);
}
myAudio.src = 'audio/song.mp3';
}
});
I may not be perfectly right but here is some thing that can help you maybe:
var myAudio = document.createElement('audio');
myAudio.controls = true;
myAudio.src = 'Your File';
myAudio.play();
To make it works when you drop, you can create the audio tag before and just hit play() every drop.
I would initialise the audio tag in the ready function:
$(document).ready(function() {
}
Then user your code:
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
myAudio.play();
}
});
});
I had to put the code outside of the $(document).ready(function() to get it working in my application:
<script>
var myAudio = document.createElement('audio');
myAudio.controls = true;
myAudio.src = 'audio/beep.mp3';
myAudio.src = 'audio/beep.wav';
//myAudio.play();
</script>
Then you simply trigger the myAudio.play(); inside your drop: function code.