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/
Related
I'm trying to create UI for advanced search so that the user can make search rule boxes and then drag and drop them on top of others to create a group of rule boxes. Each box has a drop event, and when one box is dropped on top of the other a new Div container is built and the two boxes are placed there. The container also has a separate drop event and allows a box to be placed in the container if it is dropped on . The problem is that when one box is in the container and the other box is placed on it, the container event occasionally is also triggered. How to prevent container event to be triggered ? Here it is some pictures of the UI :
The rule box drop event is :
$('.ruleBox').droppable({
tolerance: 'pointer',
accept: '.ruleBox,.subExpressionContainer',
drop: function (event, ui) {
let dropped = ui.draggable,
droppedOn = $(this),
droppedParent = dropped.parent();
let newId = generateID(1),
subExpressionContainer = MakeSubExpressionContainerVariable(newId[0]),//Makes the container's html
droppedOnParent = droppedOn.parent();
droppedOnParent.append(subExpressionContainer);//Append the container to the DOM
let droppedOnSubRuleContainer = $(`#subRuleBoxContainer-${newId[0]}`);
$(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOnSubRuleContainer);
$(droppedOn).detach().css({ top: 0, left: 0 }).appendTo(droppedOnSubRuleContainer);
},
greedy: true
});
And here it is the container's droppable code :
function SetDropZoneEvent() {
$('.dropZone').droppable({
tolerance: 'pointer',
accept: '.ruleBox,.subExpressionContainer',
drop: function (event, ui) {
let dropped = ui.draggable,
droppedOn = $(this),
droppedParent = dropped.parent();
$(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn);
},
greedy: true
});
The code of the container maker :
function MakeSubExpressionContainerVariable(id) {
return `
<div class="subExpressionContainer" id="subExpressionContainer-${id}">
<button class="searchButtons" id="addEditButt" onclick="ToggleOperator(this)"
value="AND" >AND</button>
<div class="subRuleBoxFreeSpace">
</div>
<div class="subRuleBoxContainer dropZone" id="subRuleBoxContainer-${id}">
</div>
<button class="searchButtons" id="addEditButt"
onclick="RemoveSubExpressionContainer('subExpressionContainer-${id}')"
value="X" >X</button>
</div>`}
The code of rule box maker :
function MakeRuleBoxVariable(sPName, sPDName, sPType, sPRelation, sPDetailAction,
sCondition, sContent) {
let id = new Date().getTime();
return `
<div class="ruleBox" id="ruleBox-${id}" data-property-name = "${sPName}"
data-type = "${sPType}" data-relation = "${sPRelation}" data-detail-action =
"${sPDetailAction}" >
<div class="rule">
<div class="ruleText"><span style="height: 100%;">"${sPDName}"
"${sCondition}" "${sContent}"</span></div>
</div>
<div class="searchBoxButt">
<div class="searchBoxRemoveIcon"><span> </span><a
onclick="RemoveRuleBox('ruleBox-${id}')"><i class="fa fa-times">
</i></a><span> </span>
</div>
<div class="searchBoxEditIcon"><span> </span><i class="fa fa-edit"></i><span> </span>
</div>
</div>
</div>`
}
I want to make a little search box like http://www.chess24.com/ up right of the page.
This is my peace of HTML:
<div class="input-group" id="searchBox">
<input name="data[Search]" class="form-control" id="searchText" style="display : none; width : 0;" type="text"/>
<button class="btn btn-default" type="button" id="searchBtn">Go!</button>
</div>
and the Jquery code is:
$( document ).ready(function() {
$('#searchBtn').on('mouseenter',function(){
$('#searchText').show();
$('#searchText').animate({width: '200px'}, 500, function() {$('#searchText').focus();
});
});
$('#searchText').blur(function() {
if (!($('#searchBtn').is(":active")) && !($('#searchText').is(":active")) )
$('#searchText').animate({width: '0'}, 500, function() {$(this).hide();});
console.log($(document.activeElement));
});
});
The problem is when focus going to button or click the button the TextBox will close.
i want to it close when point out of this two elements.
$(document).on('click', function(event) {
var idx = event.target.id;
//if clicked element is not searchText or searchbtn, but searchtext is visible
if (idx !== 'searchText' && idx !== 'searchBtn' && $('#searchText').is(":visible")){
$('#searchText').animate({width: '0'}, 500, function() {$(this).hide();});
}
});
There are several ways to solve this. Just a hint.
JS:
$(function() {
$(".draggable").draggable({
revert: true,
helper: 'clone',
start: function(event, ui) {
$(this).fadeTo('fast', 0.5);
},
stop: function(event, ui) {
$(this).fadeTo(0, 1);
}
});
$("#droppable").droppable({
hoverClass: 'active',
drop: function(event, ui) {
this.value = $(ui.draggable).text();
}
});
});
HTML:
<div class="draggable">here are some draggables</div>
<div class="draggable">you can drop any of these</div>
<div class="draggable">in the text box and the</div>
<div class="draggable">text will be set to its contents!</div>
<div id="droppableHolder">
Drop in this text box:<br />
<br />
<input type="text" id="droppable" />
</div>
In below link's example , If i drop any text to textbox.It works very well.
http://jsfiddle.net/5DCZw/2/
My question:
I want to set a button.If i drag button i want to integrated button to page.
How would code change according to my scerenaio ?
I have two divs, each containing a list of quantities and items. The items are draggable and the div containing the items is droppable. If an item of the same name appears in that div, that item cannot be dropped on that div again. Eventually I will be controlling the number of items that are moved, but I'm just trying to get this part to work for now.
The problem I'm having is that once I drop an item on the div, I can no longer drag it. I've tried adding draggable() to the new item that I am creating, but that just made things weird.
The exact same code worked when I was adding an li to a ul, but I wanted to move just the name of the item and not the quantity, so I am using divs instead of li.
Here is a jsfiddle of my code: http://jsfiddle.net/imjustabill/eJ4KH/
And here are the pertinent parts
$(function () {
$("#inventory1 .item").draggable({
appendTo: "body",
helper: "clone"
});
$("#inventory2").droppable({
drop: function (event, ui) {
var item = ui.draggable.attr("data-item");
var qty = ui.draggable.attr("data-qty");
var itemDesc = ui.draggable.text();
if (!$(this).find("[data-item='"+item+"']").length) {
$("<div class='qty'></div>").text(qty).appendTo(this);
$("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).appendTo(this);
}
}
});
$("#inventory2 .item").draggable({
appendTo: "body",
helper: "clone"
});
$("#inventory1").droppable({
drop: function (event, ui) {
var item = ui.draggable.attr("data-item");
var qty = ui.draggable.attr("data-qty");
var itemDesc = ui.draggable.text();
if (!$(this).find("[data-item='"+item+"']").length) {
$("<div class='qty'></div>").text(qty).appendTo(this);
$("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).appendTo(this);
}
}
});
});
<div id="inventory1">
<h4>Inventory 1</h4>
<div class="qty">7</div><div class="item" data-qty="7" data-item="item1">Item 1</div>
<div class="qty">5</div><div class="item" data-qty="5" data-item="item2">Item 2</div>
<div class="qty">2</div><div class="item" data-qty="2" data-item="item3">Item 3</div>
<div class="qty">9</div><div class="item" data-qty="9" data-item="item4">Item 4</div></div>
<div id="inventory2">
<h4>Inventory 2</h4>
<div class="qty">4</div><div class="item" data-qty="4" data-item="item1">Item 1</div>
<div class="qty">2</div><div class="item" data-qty="2" data-item="item5">Item 5</div></div>
Any ideas? Thank you.
The Problem is, that the Draggable calls it's destroy() on drop so you loose your dragging ability. One dirty way is to make your dropped element draggable again:
$("#inventory2").droppable({
drop: function (event, ui) {
var item = ui.draggable.attr("data-item");
var qty = ui.draggable.attr("data-qty");
var itemDesc = ui.draggable.text();
if (!$(this).find("[data-item='"+item+"']").length) {
$("<div class='qty'></div>").text(qty).appendTo(this);
$("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).draggable({appendTo: "body", helper: "clone"}).appendTo(this);
}
}
});
But it won't be droppable again.
Do you have to use draggable/droppable?
Just use jQueryUI's own Sortable with connected lists. Its already perfectly implemented to jQueryUI:
jQueryUI Sortable with connected lists
i have this drag drop code for my elements
$( ".sortable" ).sortable({
revert: true
});
$( ".draggable" ).draggable({
connectToSortable: ".sortable",
helper: "clone", //clone
revert: "true"
});
$( ".sortable" ).droppable({
drop: function( event, ui ) {
var $element = $(ui.draggable).clone();
$element.find('.control').children('.delete').css('display', 'inline').click(function () {
$(this).parent().remove();
});// display properties Link
$element.find('.control').children('.properties').css('display', 'inline');
//For Text Box Change the text and add a label
if($element.find('.control').find('input').attr('type') == "text")
{
$element.find('.control').find('.controlText').html("");
$element.find('.control').find('label').html("Label Here");
}
}
});
This is the code for the drag element
<div class="tools">
<ul>
<li class="draggable" >
<div class="control">
<label> </label>
<input type="text" name="txt" value="" /><span class="controlText"> Text Box </span>
<div class="delete" style="display:none"><sup>x</sup></div>
<div class="properties txtbox" style="display:none">Properties</div>
</div>
</li>
</ul>
</div>
When the Text Box is dragged this event is attached to it
$('.txtbox').live('click', function() {
//get the label
var label = $(this).parent().find('label').html();
$("#textbox_label").val(label);
$( "#dialog-textbox" ).dialog( "open" ).data('parent_div',$(this).parent());
return false;
});
This is the dialog which opens when the Properties is clicked
<div id="dialog-textbox" title="Text Box Properties" style="display:none">
<p>This is the Text Box Properties Form.</p>
<form>
<fieldset>
<label for="textbox_label">Enter Label </label>
<input type="text" name="textbox_label" id="textbox_label" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
The following code handles the Dialog
$("#dialog-textbox").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Apply": function(){
//code to update element goes here...
var label = $("#textbox_label").val()
var $elem_clicked = $("#dialog-textbox").data('parent_div'); //This retrieves
$elem_clicked.find('label').html(label);
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
What is happening here is that i have a text box which i drag to a ul li list and that is sortable, the text box is added to the list and and then i show and close and properties links attached to the text box. when the properties is clicked a dialog box opens and asks for a new label. user gives new label to the text box that is shown with that. But what goes wrong is when i again drag the box in the sortable list up or down it goes back to its initial state and the new label is lost... I think this is due to the helper clone or should i make a clone of the draggable item?
Use a simple trick to distinguish you original element fromthe copy you drag:
- add a class to the label of the original element eg
<label class='orig'> </label>
- in your $(".sortable").droppable handler add atthe end
$(ui.draggable).find('.control').find('.orig').html("Label Here").removeClass('orig');
It should solve your problem. Check it here.