Is it possible to check if a sortable item has moved from left to right more than x pixels?
Here is a place to play:http://jsfiddle.net/qfgd9/4/
For instance if the user moves item1 more than 200px do something
if( drag > 200 ) {
alert( "something" );
}
JQUERY:
$( "#sortable" ).sortable({
});
HTML:
<div id="sortable">
<div>item1</div>
<div>item2</div>
<div>item3</div>
</div>
<div id="check"></div>
Try this: http://jsfiddle.net/lotusgodkk/GCu2D/262/
You can get the difference in left offset from ui object by using originalPosition and position . Hence by the difference in their values you can easily find the movement.
$(function () {
$("#sortable").sortable({
sort: function (event, ui) {
var move = (ui.position.left - ui.originalPosition.left);
$('#check').text(move);
if(move>200){
alert('moved beyond 200px'); //Do something.
}
}
});
});
Related
I have a page that implements jQuery draggable, droppable, and sortable. It contains rows of div's, an "Add Line" button, and an image icon that can be dragged onto any div row that causes a modal window to display allowing an image to be placed onto the row. Everything works great...except:
I use jQuery sortable to allow the rows to be re-arranged. As dragging occurs (constrained to the y-axis), the div that the dragged div is being dragged over, and placed after if it is dropped, is colored gray. This works great, except when there are images in a DIV, causing the dragged DIV to have a much greater height than an empty div. It doesn't seem to track properly, as demomnstrated by how the rows turn to and from gray.
Here is some JQuery code:
$(".dropzone").droppable({
over: function(event,ui)
{
var ElementOver = $(event.target);
var DraggedElement = $(ui.draggable);
var IDofDraggedElement = DraggedElement.attr("id");
ElementOver.css("background-color","lightgray");
},
out: function(event,ui)
{
var ElementOver = $(event.target);
ElementOver.css("background-color","");
},
drop: function(event,ui)
{
DropObject(event,ui); //This handles Ajax activity
var ElementOver = $(event.target);
ElementOver.css("background-color","");
}
});
$("#lines").sortable({
handle: '.iconmove',
axis: 'y',
tolerance: 'pointer',
helper: 'clone'
});
and here is a sample of my HTML:
<div id="linecontainer" class="w3-card-4 w3-padding">
<div id="lines">
<cfoutput query="qFormLines" group="formlineid">
<div class="w3-row w3-padding" style="width:80%" id="line#formlineid#">
<div class="w3-col w3-center l1 m1 s1">
<img id="moveicon#formlineid#" class="iconmove" src="_images/updown24.png" title="Move Line" >
</div>
<div class="dropzone w3-padding w3-col w3-border l11 m11 s11" id="zone#formlineid#" >
<cfoutput>
<cfif imagefile NEQ "">
<img id="formitem#formitemid#" class="w3-border" src="_images/#imagefile#" >
</cfif>
</cfoutput>
</div>
</div>
</cfoutput>
</div>
</div>
Here is a fiddle I created, although it doesn't quite work the same as my local source code:
Fiddle
Although not ideal, just change the JQuery Droppable method's option - Tolerance from its default 'intersect' to 'touch'. It will allow you to see the effect whenever the draggable overlaps the droppable by any amount of touching:
$(".dropzone").droppable({
// Change the tolerance to 'touch'
tolerance: "touch",
over: function(event, ui) {
var ElementOver = $(event.target);
var DraggedElement = $(ui.draggable);
var IDofDraggedElement = DraggedElement.attr("id");
console.log(IDofDraggedElement);
//if (IDofDraggedElement.indexOf("imageicon") == 0) //MOVING A LINE
ElementOver.css("background-color", "lightgray");
},
out: function(event, ui) {
var ElementOver = $(event.target);
ElementOver.css("background-color", "");
},
drop: function(event, ui) {
var ElementOver = $(event.target);
ElementOver.css("background-color", "");
}
});
$("#lines").sortable({
handle: '.iconmove',
axis: 'y',
tolerance: 'pointer',
helper: 'clone'
});
The droppable's tolerance has four options:
"fit − Draggable covers the droppable element in full.
intersect − Draggable overlaps the droppable element at least 50% in both directions.
pointer − Mouse pointer overlaps the droppable element.
touch − Draggable overlaps the droppable any amount of touching."
Quote from https://www.tutorialspoint.com/jqueryui/jqueryui_droppable.htm
I am trying to get drag and drop working properly and on desktop of laptop pc it is fine. However, on a mobile device, when I drag and drop, when dropped, the dragged item dissapears underneath (i think) everything else and I really am unable to work out why.
I have uploaded a page showing the problem to http://mailandthings.co.uk/dam1/
I have tried setting the zindex in the draggable code and that makes no difference
var $dragContainer = $("div.drag-container");
var $dragItem = $("div.drag-item");
$dragItem.draggable({
cursor: "move",
snap: "div.drag-container",
snapMode: "inner",
snapTolerance: 10,
helper: "clone",
handle: "i",
zIndex: 10000
});
$dragContainer.droppable({
drop: function (event, ui) {
var $elem = $(event.toElement);
var obj = {
posX: event.pageX - $dragContainer.offset().left - event.offsetX,
posY: event.pageY - $dragContainer.offset().top - event.offsetY,
data: $elem.data(),
html: $elem.html()
};
addElement(obj);
masterPos.push(obj);
}
});
function addElement(obj) {
var $child = $("<div>");
$child.html("<i>" + obj.html + "</i>").addClass("drop-item drop-item-mobile");
$child.attr("data-type", obj.data.type);
$child.css({
top: obj.posY,
left: obj.posX
});
$dragContainer.append($child);
}
If it using jQuery UI Touch Punch 0.2.3
Does anyone have any ideas?
There was sort of a logistical issue that I found. Based on your code, I could identify the following state / logic:
User drags an item (A, B, C) to the car image to indicate a Dent, Scratch, or Heavy Damage
The Drop Point indicates where the Type of damage is located
When the dragged item is dropped, a new object should be created that indicates the Type and stores the location on the car map
This new object replaces the dragged item and is appended to the container
To expand on this, you have the following code that is the dragged element, for example:
<div class="drag-item ui-draggable" style="">
<i data-type="A" class="ui-draggable-handle">A</i>Dent
</div>
This is important when creating the new object. In your current code, you're requesting data from an object that does not have any data attributes, $elem.data(). Remember that this is the <div> that contains the <i> that has the attribute. So data is null or undefined. You will want to capture the data from the child element: $elem.find("i").data().
Also, since you append all the HTML to your new object, you make a double wrapped element. $child will look like:
<div class="drop-item drop-item-mobile">
<i>
<div class="drag-item ui-draggable" style="">
<i data-type="A" class="ui-draggable-handle">A</i>Dent
</div>
</i>
</div>
I do not think this was your intention. I suspect your intention was to create:
<div class="drop-item drop-item-mobile">
<i>A</i>
</div>
Here is an example of all this: https://jsfiddle.net/Twisty/g6ojp4ro/40/
JavaScript
$(function() {
var theForm = document.forms.form1;
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
var masterPos = [];
$("#hidpos").val('');
var $dragContainer = $("div.drag-container");
var $dragItem = $("div.drag-item");
$dragItem.draggable({
cursor: "move",
snap: "div.drag-container",
snapMode: "inner",
snapTolerance: 10,
helper: "clone",
handle: "i",
zIndex: 10000
});
$dragContainer.droppable({
drop: function(event, ui) {
var $elem = ui.helper;
var type = ui.helper.find("i").data("type");
var $child = $("<div>", {
class: "drop-item drop-item-mobile"
}).data("type", type);
$("<i>").html(type).appendTo($child);
$child.appendTo($dragContainer).position({
of: event
});
var obj = {
posX: $child.offset().top,
posY: $child.offset().left,
data: $child.data(),
html: $child.prop("outerHTML")
};
masterPos.push(obj);
}
});
$("map").imageMapResize();
// Save button click
$('#form1').submit(function(e) { //$("#btnsave").click(function () {
if (masterPos.length == 0) {
$("#spnintro").html("Oops!");
$("#spninfo").html("No position data was entered");
$("#dvinfo").fadeTo(5000, 500).slideUp(500, function() {});
} else {
$("#hidpos").val(JSON.stringify(masterPos));
$.ajax({
url: '/handlers/savepositions.ashx',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function(data) {
$("#spnintro").html("Success!");
$("#spninfo").html("Position data has been saved");
$("#dvinfo").fadeTo(5000, 500).slideUp(500, function() {});
}
});
}
e.preventDefault();
});
});
Tested with Mobile client at: https://jsfiddle.net/Twisty/g6ojp4ro/40/show/ and is working as expected.
Hope that helps.
I have a table and need to drag/drop cells containing data into blank cells. I'm able to drag and drop fine, but once a cell is dragged away, I need its "old" position to now become a droppable cell. Since the cell is dragged, I need something else to reference. I ended up wrapping each of the td elements in a div element, but all references return "undefined" on the inner cellDiv id (or return the outer tableDiv id). On the fiddle, I notice that the blue background is not appearing so I don't think the 'cellDiv' is doing much.
Next I am going to try swapping the td and cellDiv elements, but I decided to post the question first, as I've searched everywhere and cannot seem to find this specific problem addressed. Thanks for your help.
here is the problem in a jsfiddle: http://jsfiddle.net/tgsz34hx/3/
And the code:
<div id='tableDiv'>
<table>
<tr id='row1'>
<div class='cellDiv' id='r1c1'>
<td class='drop' id='col1'>Drop Here</td></div>
<div class='cellDiv' id='r1c2'>
<td class='nodrop' id='col2'>Drag Me</td></div>
</tr>
</table>
</div>
$(document).ready(function () {
var fromDiv;
$('.nodrop').draggable({
cursor: "move",
appendTo: "body",
revert: "invalid",
start: function (event, ui) {
var thisDiv = $(this).attr('id');
fromDiv = $(this).closest('.cellDiv').attr('id');
alert("thisDiv=" + thisDiv + ", fromDiv=" + fromDiv);
}
});
$('.drop').droppable({
accept: ".nodrop",
tolerance: "pointer",
snap: ".drop",
drop: function (event, ui) {
var parenttd = $(ui.draggable).closest('td').attr('id');
var parentdiv = $(ui.draggable).closest('.cellDiv').attr('id');
// alert("parenttd=" + parenttd + ", parentdiv=" + parentdiv);
$(this).removeClass('drop');
$(this).addClass('nodrop');
$(this).droppable('option', 'disabled', true);
}
});
});
#tableDiv {
background-color: grey;
}
#tableDiv td {
background-color: red;
}
#tableDiv div {
background-color: blue;
}
How the new jQueryUI's tooltip widget can be modified to open the tooltip on click event on certain element's on document, while the others are still showing their tootip on mouseover event. In click-open case the tooltip should be closed by clicking somewhere else on the document.
Is this possible at all?
Using jqueryui:
HTML:
<div id="tt" >Test</div>
JS:
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
You can check it using
http://jsfiddle.net/adamovic/A44EB/
Thanks Piradian for helping improve the code.
This code creates a tooltip that stays open until you click outside the tooltip. It works even after you dismiss the tooltip. It's an elaboration of Mladen Adamovic's answer.
Fiddle: http://jsfiddle.net/c6wa4un8/57/
Code:
var id = "#tt";
var $elem = $(id);
$elem.on("mouseenter", function (e) {
e.stopImmediatePropagation();
});
$elem.tooltip({ items: id, content: "Displaying on click"});
$elem.on("click", function (e) {
$elem.tooltip("open");
});
$elem.on("mouseleave", function (e) {
e.stopImmediatePropagation();
});
$(document).mouseup(function (e) {
var container = $(".ui-tooltip");
if (! container.is(e.target) &&
container.has(e.target).length === 0)
{
$elem.tooltip("close");
}
});
This answer is based on working with different classes. When the click event takes place on an element with class 'trigger' the class is changed to 'trigger on' and the mouseenter event is triggered in order to pass it on to jquery ui.
The Mouseout is cancelled in this example to make everything based on click events.
HTML
<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2">
?</button>
</p>
jQuery
$(document).ready(function(){
$(function () {
//show
$(document).on('click', '.trigger', function () {
$(this).addClass("on");
$(this).tooltip({
items: '.trigger.on',
position: {
my: "left+15 center",
at: "right center",
collision: "flip"
}
});
$(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
$(this).tooltip('close');
$(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
e.stopImmediatePropagation();
});
})
})
http://jsfiddle.net/AK7pv/111/
I have been playing with this issue today, I figured I would share my results...
Using the example from jQueryUI tooltip, custom styling and custom content
I wanted to have a hybrid of these two. I wanted to be able to have a popover and not a tooltip, and the content needed to be custom HTML. So no hover state, but instead a click state.
My JS is like this:
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
The first part is more or less a direct copy of the code example from UI site with the addition of items and content in the tooltip block.
My HTML:
<p>
<input class='hidden' id="age" />
Click me ya bastard
</p>
<div class="myPopover hidden">
<h3>Hi Sten this is the div</h3>
</div>
Bacially we trick the hover state when we click the anchor tag (fireTip class), the input tag that holds the tooltip has a mouseover state invoked, thus firing the tooltip and keeping it up as long as we wish... The CSS is on the fiddle...
Anyways, here is a fiddle to see the interaction a bit better:
http://jsfiddle.net/AK7pv/
This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip.
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
},
}
);
$(this).tooltip("open");
});
HTML
Test
Sample: http://jsfiddle.net/A44EB/123/
Update Mladen Adamovic answer has one drawback. It work only once. Then tooltip is disabled. To make it work each time the code should be supplement with enabling tool tip on click.
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("enable"); // this line added
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
jsfiddle
http://jsfiddle.net/bh4ctmuj/225/
This may help.
<!-- HTML -->
Click me to see Tooltip
<!-- Jquery code-->
$('a').tooltip({
disabled: true,
close: function( event, ui ) { $(this).tooltip('disable'); }
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});
I'm trying to make it so only the span that is being dragged has a class added, so far I have this but but it adds the class to all span's ...
$(function() {
$('span').draggable();
$('#container, #board').droppable({
tolerance : 'touch',
over : function() {
$('li').each(function() {
$(this).find('span').addClass('over');
});
},
drop : function() {
$('li').each(function() {
$(this).find('span').removeClass('over');
});
}
});
});
Here's the he HTML (if that helps)
<div id="container">
<div id="board">
<ul>
<li class="foo1"><span class="p1"></span></li>
<li class="foo2"><span class="p1"></span></li>
<li class="foo1"><span class="p1"></span></li>
<li class="foo2"><span class="p1"></span></li>
</ul>
</div>
</div>
you can use the start event to add the class to the element being dragged.
$('span').draggable({
start: function(event, ui) {
$(event.target).addClass('over');
}
});
and to remove it again when no longer dragged simply add a handler to the stop event as well
$('span').draggable({
start: function(event, ui) {
$(event.target).addClass('over');
},
stop: function(event, ui) {
$(event.target).removeClass('over');
}
});
You don't need the each(), just do $(this), which refers to the current element, and it should work:
over : function() {
$(this).find('span').addClass('over');
}
$(function() {
$('span').draggable();
$('#container, #board').droppable({
tolerance : 'touch',
over : function() {
$(this).find('li span').addClass('over');
},
drop : function() {
$(this).find('li span').removeClass('over');
}
});
});
$('#container, #board').droppable({
tolerance : 'touch',
over : function(e, elem) { // Params
// here is the original element we move
$(elem.draggable).find('span').addClass("over");
},
drop : function(e, elem) {
//
$(elem.draggable).find('span').removeClass('over');
however if you dont use original Dom when it is been dragging (ie. {helper: "clone" }), elem.draggable wont affect your helper. thats write your .draggable code here...
and also you can try "elem.helper"