I am working with jsPlumb and am trying to create a simple toolbox of 2 elements. These elements need to be dragged and dropped onto the canvas where further action such as creating connections in between them and deleting them can be performed. But for now, I've been able to accept 2 div under the droppable method. Depending on the accepted div, the class to be added and the fields to be appended to the element change. The working version of the following code: https://github.com/NayantaraJeyaraj/MultipleElements
$(".project").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$(".query").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
And the droppable method:
$("#container").droppable
({
accept: '.project, .query',
containment: 'container',
drop: function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
newAgent.text('Element ' + i);
$(droppedElement).draggable({containment: "container"});
$('#container').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent'
});
newAgent.dblclick(function(e) {
jsPlumb.detachAllConnections(newAgent.attr('id'));
jsPlumb.removeAllEndpoints($(this));
jsPlumb.detach($(this));
$(newAgent).remove();
});
i++;
}
});
What I need this piece of code to do is, to add the "pro" class to the newAgent( as shown in the code) when the accepted div is '.project' else if the accepted div is '.query' it needs to add the "que" class instead of the pro class. But here, currently it adds the pro class for both instances. How ca I detect which is being accepted and then add the class accordingly?
I worked a long with jsplumb for my project and i think you can take a look at this codepen :-
http://codepen.io/soniabhishek/pen/XjNYGp?editors=1010
//This is specific function when drop occurs
jsPlumb.draggable(c1_1,{
stop: function(params){
console.log("dropped", params)
}
});
Here i have some basic example of drag drop, multi select, as well as group concepts.
And in particular look for stop function which you particularly looking for.
Thanks.
Related
I'm looking for a way to toggle the scrolling of a datatable when using a draggable link ala jqueryUI.
Due to space constraints I need a scrolling DataTable and due to UI requirements I need draggable links.
Example I fleshed out: http://jsfiddle.net/sqwgs6wb/8/
JavaScript from the sample:
$(document).ready( function () {
var table = $('#example').DataTable({
"scrollX": true,
"scrollCollapse": true,
"bJQueryUI": true,
"scrollY": 140 });
$( init1 );
$( init2 );
$( ".makeMeDraggable" ).on( "drag", function( event, ui ) {
$('#status').html("dragging");
} );
$( ".makeMeDraggable" ).on( "dragstop", function( event, ui ) {
$('#status').html("Stopped dragging");
} );
} );
function init1() {
$('.makeMeDraggable').each(function(i) {
$(this).draggable({
revert: true,
delay: 100,
helper: "clone",
containment: "document"});
})}
function init2() {
$('#makeMeDroppable').droppable( {
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
alert( 'A Link was dropped onto me! with a URL of: ' + draggable.attr('href') );
}
Using jqueryUI I can detect when a datatable item(link) is being dragged and when it is done being dragged but the problem I'm running into is that the contents of the table shift around when I want to drag a link onto a drop area. Thus losing their place in the table.
I've looked on Stack and on datatables.net and I think it might be possible to access an extended function and freeze it but I'm not sure about how to do that.
I would very much like the contents of the table to not move when a user drags a draggable item from the datatable. Basically, freezing the table scroll in the X and Y axis would rock and naturally I would need the ability to unfreeze it.
I found a post that had a similar problem and verified that the solution fixes your problem in the fiddle. Here is the thread that discusses it
Draggable element hidden outside container
Basically, these 3 options need to be setup on your draggble setup
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
Here is a working update of the fiddle with these options
http://jsfiddle.net/sqwgs6wb/11/
It's a JqueryUI issue, or rather my lack of knowledge of all the options.
The answer is to add appendTo to the jqueryUI Draggable initialization.
http://jsfiddle.net/sqwgs6wb/9/
function init1() {
$('.makeMeDraggable').each(function(i) {
$(this).draggable({
revert: true,
delay: 100,
helper: "clone",
appendTo: 'body', //<-==This is what fixed it.
containment: "document"});
})}
The appendTo 'body' option causes the draggable item to be created at the body level and not inside the scrollable container like it was before.
I'm starting a project that will require that users be able to create multiple custom avatars. To do this, I want them to be able to send images that are in their inventory to a manipulation frame. Within this frame, users should be able to move and resize the images - double clicking them to remove the image from the frame and sending it back into their inventory. To the right of the manipulation frame, I would like a sortable list that will dictate the z-index of the corresponding item with the item at the top being in back of the manipulation frame. So far, I have this: http://jsfiddle.net/Thaikhan/e3Gd6/10/show/.
The list generates and is sortable but does not affect the z-index of the image. Also, the code is pretty buggy and often images will disappear off frame.
See JSFiddle here: http://jsfiddle.net/Thaikhan/e3Gd6/10/
Here is the JavaScript code:
//Click into Frame
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
autoHide: true,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
});
//Double Click out of Frame
$('.frame').on('dblclick', '.ui-draggable', function () {
$(this).appendTo(".inventory");
$(this).draggable("destroy");
$("img", this).resizable("destroy").attr('style', '');
refreshIndexList();
});
//Updates List Items
function refreshIndexList() {
var listitems = $('.frame').children().length;
$('#sortable').empty();
var titles = $(".frame img:nth-of-type(1)").attr('title');
for (var count = 1; count <= listitems; count++) {
var title = $(".frame img").eq(count-1).attr('title');
var $li = $("<li class='ui-state-default'/>").text(title);
$('#sortable').append($li);
}
}
//Makes List Sortable
$(function () {
$("#sortable").sortable({
placeholder: "ui-state-highlight"
});
$("#sortable").disableSelection();
});
//Inventory Grid
$(function() {
$( "#grid" ).sortable();
$( "#grid" ).disableSelection();
});
I am a novice in JavaScript and have received much help in getting this far. I am hoping that once again I can receive help from the community and figure out how to have the sortable list change the z-index of the item. Additionally, if anyone sees why it's buggy, please let me know.
Ultimately, I want to be able to grab from the manipulation frame the image_id's, their locations, their z-indices, and their sizes and store it all in a database. This will hopefully allow users to return and edit their avatar creations.
A thousand thanks for your help!
create function with editing z-index:
function zindex() {
var title = "";
var i = 9999;
$(".ui-state-default").each(function () {
i--; //z-index position counter
title = $(this).text();
$(".frame img[title='" + title + "']").parent().css("z-index", i);
});
}
call it on adding img
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
autoHide: true,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
zindex();
});
and use it on mouseup (drop event emulation)
$("#sortable").mouseup(function () {
setTimeout(function() {
zindex();}, 100);
});
FIDDLE
For my project I need to know which border ('e' or 'w') the user take to resize a div. So is it possible to know or not?
I got that:
$(divProjet).resizable({
handles: "e,w",
grid: 71,
maxWidth: 1498,
minWidth: 69,
containment: $($(this).parent()[0]).parent()[0],
start: function () {
},
stop: function (event, ui) {
var numDayModif = (ui.size[0] - ui.originalSize[0]) / 71;
}
});
Since jQuery UI inserts elements into your resizable <div> for each handle, you can work out which one is being targeted each time a resize begins:
start: function (e) {
var className = e.originalEvent.target.className.split(" ").pop();
var side = className.replace("ui-resizable-","",className);
console.log(side); // e or w
}
e.originalEvent.target is the 'handle' (DOM element)
We get the full classname, split the classes, and get the last one using pop(). (The last class is something like ui-resizable-e
Remove the 'ui-resizable-' bit from your string using replace() and you receieve what's left (e or w)
Note: It'll of course work should you choose to use North and South handles too.
JSFiddle
I have added a container div around the slickgrid (the container has a heading etc just to make it all look neat and tidy).
I have made the div resizable using jquery and instructed it to resize the grid and viewport simultaneously.
It works wonderfully (everything resizes in unison) but the number of visible rows does not update until I scroll.
Is there a way to force the viewport to refresh?? grid.render does not work.
$(".container").resizable({
alsoResize: ".grid, .slick-viewport",
resize: function (event, ui) { }
});
$(".container").on("resize", function (event, ui) {
dataView.refresh();
grid.render();
});
In case anybody has the same problem, the answer is grid.resizeCanvas();
The code now looks like this:
$('.container').each(function () { // I have several grids + containers
var gridID = $(this).attr('id'); // get the container ID
$(this).resizable({
// for some reason, there was a problem with $(this) - I had to use
// an explicit reference by passing the container ID
alsoResize: '#' + gridID + ' .grid, #' + gridID + ' .slick-viewport',
resize: function (event, ui) { }
});
$('.container').on('resize', function (event, ui) {
grid.resizeCanvas()
});
}
You might also want to look at an answer I gave for an auto grid resize, it's auto-resizing with the viewport and so changing the size of your browser will be reflected on the grid size...
See it here: Slickgrid: Final column auto size to use all remaining space
With jQuery I have a draggable element. It's a div with a size of 200 x 40.
Of course the user can start dragging this div by clicking at variuos positions in the div.
What I want is when the startdrag event happens, the helper (clone) div will always be aligned to the cursor the same way, no matter where in the div the user started dragging.
So after the mousedown the helper's top and left values need to be the same as the mouses x and y. I've tried this using this coffeescript code:
onStartDrag: ( e, ui ) =>
ui.helper.css
left: e.clientX
top: e.clientY
console.log( e )
But it doesn't work and my guess is that this is happening because the values I put in are directly overwritten by the draggable plugin because of mouse movement..
Any ideas?
After trying Amar's answer and realizing that it screws up interactions with droppable, I dug deeper, and found that there is an option specifically to support this called cursorAt.
$('blah').draggable
helper: ->
... custom helper ...
cursorAt:
top: 5
left: 5
This places the top-left corner of the helper 5 pixels above and to the left of the cursor, and interacts correctly with droppable.
http://api.jqueryui.com/draggable/#option-cursorAt
And let's give credit where credit is due. Thanks, jquery-ui mailing list archives!
https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw
Try setting like this,
start: function (event, ui) {
$(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left);
$(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top);
}
Take a look at this jqFAQ.com , it will be more helpful for you.
I've found a fix for this and it's very easy, if you are using the sortable plugin you can fix the helper position like this:
sort: function(e, ui) {
$(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}
I Agree with #roverv.
This works fine form me.
$('.js-tire').draggable
tolerance: 'fit',
appendTo: 'body',
cursor: 'move',
cursorAt:
top: 15,
left: 18
helper: (event) ->
$('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
start: (event, ui) ->
if $(event.target).hasClass 'in-use'
$('.js-send-to-maintenance-box').addClass 'is-highlighted'
else
$('.ui-droppable').addClass 'is-highlighted'
stop: (event, ui) ->
$('.ui-droppable')
.removeClass 'is-highlighted'
.removeClass 'is-dragover'
This did the trick for me:
appendTo: 'body'
Like so:
$(this).draggable({
helper: "clone",
cursor: "move",
appendTo: 'body'
});