Develop Reference

How to append dragged li in to droppable ui using Draggable and Droppable in jQuery UI?

Here what i want to do
HTML
<ul class="droppable"> </ul>
<ul class="droppable">
<li class="draggable"> Item 1</>
<li class="draggable"> Item 2</>
</ul>
jQuery
$(function () {
$(".draggable").draggable();
$(".droppable").droppable({
drop: function (event, ui) {
alert("Dropped!");
}
});
});
i want to drag li into another UL and li has to append into dropped UL.

Hope this will help you.
Demo:http://jsfiddle.net/x5T4h/519/
$(function() {
$( ".drag li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( ui.draggable ).clone().appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});

JQuery Sortable list records increment Issue

I am performing drag/drop and sortable operations between two containers from my bottom container im dragging list records and dropping in top container in top container i'm performing sorting operations using JQUERY UI..
All is well between dragging and dropping contents from one div section to another div section but while doing sorting operation my list records are creating duplicate list each time i shuffle list records please somebody help me out in fixing this issue
Thanks!!
In inspect element i found this bug
Html
<ol id="sortable"></ol>
<ul id="draggable">
<?php
for($i=1;$i<=35;$i++)
{
?>
<li id='article_<?php echo $i;?>' class="draggable_li qitem" >
<div class="main_div">
<div class="secondary_div">
<div class="form_div">
<form>
<input style="width:15px;" type="checkbox"/>
</form>
</div>
<div class="item_div">
<span class="item">Item = <?php echo $i; ?></span>
</div>
</div>
<div class="hello btn btn-success">
Add to Top Stories
</div>
</div>
</li>
<?php
}
?>
</ul>
JQuery
$(document).ready(function()
{
$("#sortable").sortable(
{
revert: true,
refreshPositions: true ,
helper : 'clone',
cursor: "move",
delay: 1,
tolerance: 'pointer',
revert: 50
});
$("#sortable").disableSelection();
$(".qitem").draggable({
//containment : "#container",
tolerance:"pointer",
helper : 'clone',
//refreshPositions: true ,
revert : 'invalid',
opacity:.4,
});
$("#sortable").droppable(
{
revert:true,
hoverClass : 'ui-state-highlight',
//greedy: true,
//refreshPositions: true,
drop : function(ev, ui)
{
$(ui.draggable).clone().appendTo(this);
if($(this)[0].id === "sortable")
{
console.log($(this).closest("button").find('.hello'));
$(this).find('.hello').hide();
$(this).find('.AH_section').show();
//$(ui.draggable).draggable( 'disable' ); //this will not append dragged list at top of the container
ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul')); //this will append dragged list at top of the container
return true;
}
}
});
});

I'll leave this here for now since i gotta go, so dont have time to input in the drop:function(). It should be straight foward though.
But the issue is you are not suppose to declare sortable and droppable at the same time.
To solve your issue, just add connectToSortable:'#sortable', and remove the droppable
$("#sortable").sortable(
{
revert: true,
refreshPositions: true,
helper : 'clone',
cursor: "move",
delay: 1,
tolerance: 'pointer',
revert: 50
}).disableSelection();
$("#sortable").sortable(
{
revert: true,
refreshPositions: true,
helper : 'clone',
cursor: "move",
delay: 1,
tolerance: 'pointer',
revert: 50
}).disableSelection();
$(".qitem").draggable({
//containment : "#container",
connectToSortable:'#sortable',
tolerance:"pointer",
helper : 'original',
//refreshPositions: true ,
revert : 'invalid',
opacity:.4,
});
https://jsfiddle.net/4n9fn8ou/2/

Jquery Ui draggable want to set Position for drop

Using Jquery UI draggable.
In which I am dragging a (#b1)thumbnail & appending a div.But i want to set drop area.Like if i drag my thumbnail in a .box(border box) then only append works & else not.I want to set such condition.
My code
$( "#b1" ).draggable({ revert: true });
$( ".box" ).droppable({
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
}
});
$( "#b1" ).draggable({
start: function(event, ui) {
console.log(event);
console.log(ui);
},
stop: function(event, ui) {
$(".box").append('<div id="box'+objArr.length+'" class="border" onclick="$(this).resizable();$(this).draggable();"><img src="close.png" alt="close" width="20" height="20" class="close" id=box"'+objArr.length+'" onclick="$(this).parent().hide();"> <textarea rows="2" class="txt" id="TextBox'+objArr.length+'" cols="2"></textarea></div>');
}
});
This is my fiddle code: http://jsfiddle.net/zha4v66u/2/

set droppable like
$(".box").droppable({
accept: "#b1",
drop: dropped,
scope: "drop",
})
function dropped(event, ui) {
$(this).append(ui.draggable);
$(ui.draggable).css({ "left": "0", "top": "0" });
}
}
http://api.jqueryui.com/droppable/#option-accept

jQuery('#droppable').droppable(
{
accept: '#draggable',
drop: function(event, ui)
{
ui.draggable.data('dropped', true);
// awesome code that works and handles successful drops...
}
});
jQuery('#draggable').draggable(
{
revert: false,
start: function(event, ui) {
ui.helper.data('dropped', false);
},
stop: function(event, ui)
{
alert('stop: dropped=' + ui.helper.data('dropped'));
// Check value of ui.helper.data('dropped') and handle accordingly...
}
});
You can try this using accept feature.
jQuery drag and drop - checking for a drop outside a droppable

Below solution. Hope this solves the issue.
Step 1: Html
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
Step 2: Jquery
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
// After drop done
}
});
});
</script>

Sortable bind an on click event

I have a sortable element of div
<div class="question-constructor multiple-choice-problem">
<label for="textbox" class="question-label"> #. Edit this to define question: </label>
<input type="radio" name="test" id="option-1-1" class="question-radio" style="float:left;">
<input type="radio" name="test" id="option-1-2" class="question-radio" style="float:left;">
<input type="radio" name="test" id="option-1-3" class="question-radio" style="float:left;">
<input type="radio" name="test" id="option-1-4" class="question-radio" style="float:left;">
</div>
This divs are draggable then are dropped to the sortable. Here is the div where they drop the draggable:
<div id="preview" ></div>
Here is my sortable JS:
var sortableIn = 0;
$('#preview').sortable({
receive: function(event, ui) {
sortableIn = 1;
$(ui.item).addClass('editable');
},
placeholder: 'ph',
over: function(event, ui) { sortableIn = 1; },
out: function(event, ui) { sortableIn = 0; },
start: function( event, ui ) {
$(ui.helper).addClass('on-sort');
},
beforeStop: function (event, ui) {
if (sortableIn == 0) {
ui.item.remove();
}
},
stop: function( event, ui ) {
$(this).find('.on-sort').removeClass("on-sort");
}
});
What I want to do is create an onclick even to the sortable items specificaly. I tried using this:
$(function() {
$(document).on('click', '#preview ', function() {
console.log('clickable');
});
});
But when I clicked the sortable items It clicks every thing. I want to change the text of the label on the sortable div where I specifically clicked.
For example:
I dragged .question-constructor div 3 times to the #preview div. (This will make the #preview sortable div have 3 items)
When I click the 2nd item in the sortable div, I want to change the text label on it to another value( only on this item ).
How can I do this?
If my question is unclear please comment below and I will respond accordingly.

You could still use the on click event but over the clicked item:
$(".question-label").on("click", function (e) {
$(e.target).text('I am changed');
});
Fiddle: http://jsfiddle.net/eBXkT/

Draggable on nested Droppable

following this example.
<div id="containers">
<div class="frame">
<div class="popup">Popup</div>
<div class="object">Object 1</div>
<div class="object">Object 2</div>
</div>
</div>
I want each object to be draggable to popup.
once inside the popup, have the possibility to draggable again for the frame
The problem is the second time I do it.
When i try draggable object to droppable popup, nothing happenz..
Any Ideas?
here my code.
http://jsfiddle.net/PtLLf/49/

The reason is because by default, when an element is dropped on nested droppables, each droppable will receive the element.
So in your case the drop of the inner is fired, but the outer div is fired too and get the element in itself.
You can set greedy option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.
Ref: http://api.jqueryui.com/droppable/#option-greedy
Code:
$('#containers .frame .popup').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: '.object',
greedy: true ,
drop: function (event, ui) {
$(ui.draggable).addClass("insidePopup");
ui.draggable.detach().appendTo($(this));
}
});
$('#containers .frame').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: '.insidePopup',
greedy: true ,
drop: function (event, ui) {
ui.draggable.detach().appendTo($(this));
$(ui.draggable).removeClass("insidePopup");
}
});
$('#containers .frame .object').draggable({
helper: 'clone',
containment: "document"
});
Demo: http://jsfiddle.net/IrvinDominin/dVFgn/