ashesofowls / jquery.shapeshift Goto Github PK
View Code? Open in Web Editor NEWA dynamic grid system with drag and drop functionality.
Home Page: http://ashesofowls.github.com/jquery.shapeshift/
License: MIT License
A dynamic grid system with drag and drop functionality.
Home Page: http://ashesofowls.github.com/jquery.shapeshift/
License: MIT License
I use cdnjs a lot, mostly for the convenience of just copy/pasting a URL to try out new libraries, it would be cool to see this library there.
Hi,
There may be something obvious I'm missing but I can't seem to get version 2 running with a basic example as per the readme. Would you mind helping me?
If I add the dependencies and set up with something like:
...
<script type="text/javascript">
$(function() {
$('.container').shapeshift();
});
</script>
</head>
<body>
<div class="container" style="position: relative;">
<div style="position: absolute;">Child Element 1</div>
<div style="position: absolute;">Child Element 2</div>
<div style="position: absolute;">Child Element 3</div>
<div style="position: absolute;">Child Element 4</div>
</div>```
...
Then I get the following error in Chrome:
Uncaught TypeError: Cannot read property '1' of undefined (line 589)
Any ideas?
Thanks,
Alan
I have the basic shape in place I don't now know how to creator the container with the divs in to attach the shapeshifte code. I can see you have written about targeting the container and all child elements will be looked after but can't see where I would write it? Can you help?
In my case, some element will be iframe but the user interface will broken and iframe can not dropped.
Is there any solution for iframe? or I should not adopt this library.
The console gives me the error, "Uncaught TypeError: Cannot read property 'left' of undefined", whenever I try to drag the last child. For example, when I try to drag "Child Element 3" in:
<div class="container">
<div>Child Element 1</div>
<div>Child Element 2</div>
<div>Child Element 3</div>
</div>
However, I do not get this error when I only have 2 child elements.
This is the CSS:
.container {
position: relative;
width: 100%;
border: 1px solid #aaa;
}
.container div {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #aaa;
cursor: move;
}
This is the JS:
jQuery(function ($) {
$('.container').shapeshift();
});
Out of the box I get an "Uncaught TypeError: Object [object Object] has no method 'draggable' jquery.shapeshift.js:399"
That's defined in "query-ui.min.js", not mentioned in the docs but apparently needed.
First I want to say thank you for the great work you've done.
But I discovered a little problem. If you have two containers and there are items in both, you can drag items between them without any problem. But if you have an empty container and you want to drag something in there it won't work.
Thanks,
Jonas
I want to use this plugin but its not supported in IE 8 can you give me any fix for this?
I get the following errors:
Shapeshift ERROR: There are child elements that have a larger colspan than the minimum columns set through options.
options.minColumns has been set to 2 jquery.shapeshift.js:144
Plugin.setActiveChildren jquery.shapeshift.js:144
Plugin.init jquery.shapeshift.js:74
Plugin jquery.shapeshift.js:50
(anonymous function) jquery.shapeshift.js:649
jQuery.extend.each jquery.js:649
jQuery.fn.jQuery.each jquery.js:271
$.fn.(anonymous function) jquery.shapeshift.js:640
(anonymous function)
Shapeshift ERROR: There are child elements that have a larger colspan than the minimum columns set through options.
options.minColumns has been set to 3 jquery.shapeshift.js:144
Plugin.setActiveChildren jquery.shapeshift.js:144
Plugin.init jquery.shapeshift.js:74
Plugin jquery.shapeshift.js:50
(anonymous function) jquery.shapeshift.js:649
jQuery.extend.each jquery.js:649
jQuery.fn.jQuery.each jquery.js:271
$.fn.(anonymous function) jquery.shapeshift.js:640
(anonymous function)
Shapeshift ERROR: There are child elements that have a larger colspan than the minimum columns set through options.
options.minColumns has been set to 4 jquery.shapeshift.js:144
Plugin.setActiveChildren jquery.shapeshift.js:144
Plugin.init jquery.shapeshift.js:74
Plugin jquery.shapeshift.js:50
(anonymous function) jquery.shapeshift.js:649
jQuery.extend.each jquery.js:649
jQuery.fn.jQuery.each jquery.js:271
$.fn.(anonymous function) jquery.shapeshift.js:640
(anonymous function)
Below is my HTML:
<html>
<head>
<!-- Stylesheets -->
<link rel="stylesheet" href="http://mcpants.github.io/jquery.shapeshift/template_assets/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="http://mcpants.github.io/jquery.shapeshift/template_assets/bootstrap/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="http://mcpants.github.io/jquery.shapeshift/template_assets/bootstrap/bootstrap-switch.css" />
<link rel="stylesheet" href="http://mcpants.github.io/jquery.shapeshift/template_assets/stylesheets/template.css" />
<link rel="stylesheet" href="http://mcpants.github.io/jquery.shapeshift/template_assets/stylesheets/shame.css" />
<!-- Javascripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://mcpants.github.io/jquery.shapeshift/template_assets/bootstrap/bootstrap.min.js"></script>
<script src="http://mcpants.github.io/jquery.shapeshift/template_assets/bootstrap/bootstrap-switch.js"></script>
<script src="http://mcpants.github.io/jquery.shapeshift/template_assets/javascripts/template.js"></script>
<!-- Core Shapeshift Files -->
<script type="text/JavaScript" src="http://mcpants.github.io/jquery.shapeshift/demo_assets/jquery.touch-punch.min.js"></script>
<script type="text/JavaScript" src="http://mcpants.github.io/jquery.shapeshift/demo_assets/jquery.shapeshift.min.js"></script>
</head>
<body>
<style>
ul.ss-container {
outline: 1px dashed rgba(0,0,0,0.25);
float: left;
list-style-type:none;
margin: 1%;
position: relative;
width: 100%;
}
ul.ss-container li {
background: rgba(0,0,0,0.15);
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.4);
height:70px;
position: absolute;
width: 70px;
}
ul.ss-container li[data-ss-colspan="2"] { width: 152px; }
ul.ss-container li[data-ss-colspan="3"] { width: 234px; }
ul.ss-container li[data-ss-colspan="4"] { width: 316px; }
ul.ss-container li[data-ss-rowspan="2"] { height: 152px; }
ul.ss-container li[data-ss-rowspan="3"] { height: 234px; }
ul.ss-container li[data-ss-rowspan="4"] { height: 316px; }
ul.ss-container li.ss-dragged-child {
cursor: move;
z-index: 9999;
opacity: .7;
transform:rotate(2deg);
-ms-transform:rotate(2deg); /* IE 9 */
-moz-transform:rotate(2deg); /* Firefox */
-webkit-transform:rotate(2deg); /* Safari and Chrome */
-o-transform:rotate(2deg); /* Opera */
}
ul.ss-container li.ss-placeholder-child {
background: transparent;
border: 0px;
outline: 1px dashed #68C;
}
</style>
<div class="container">
<div class="row">
<div class="span12">
<h2>Dashboard</h2>
<ul class="ss-container">
<li data-ss-colspan="1">1</li>
<li data-ss-colspan="2">2</li>
<li data-ss-colspan="2">3</li>
<li data-ss-colspan="3">4</li>
<li data-ss-colspan="4" data-ss-rowspan="2">5</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
<script>
jQuery('.ss-container').shapeshift();
</script>
</body>
</html>
Can the gutterx and gutterY be provided in %? .
I dont want to harcode .
Secondly the columnwidths can also be provided in % terms , so it will be easy to add up gutter space as required by plugin
Excellent plugin!
It really works and by the looks of it can be used as a regular sortable plugin with smooth animations.
Here is the question?
Does it use css to animate?
If not how could this be implemented?
Hi. I need to set up a variable after my element has stopped arranging. Sadly, ss-event-dropped event is not the last one, so that i can't set my variable there. How can we handle such situations?
A quick snippet of what i am saying about:
$itemGroup.on("ss-event-arrange", function(e, selected) {
// Some operations
<..>
// It's not overriden by ss-event-dropped handler
isHandlerActive = true;
});
$itemGroup.on("ss-event-dropped", function(e, selected) {
// isHandlerActive expected to be false. But it's true ;(
<...>
isHandlerActive = false;
});
I'll try to use this very nice plugin. But could you help me to the use of trash!
I enable it....
$containers.shapeshift({
enableTrash: true,
but never change in the page!
$containers.on("ss-event-dropped", function(e, $selected) {
// Get the new position for the dropped item
var position = $selected.index();
// Get the index position of each object
$objects.each(function(i) {
position[i] = $(this).index();
});
});
Uncaught TypeError: Object # has no method 'index'
Grats on releasing 2.0.
Why was the "ss-event-dragged" event removed though?
Hi, great plugin, but having an issue (and, it seems to be occurring on your demo as well.)
I have a set of 100x100 boxes, but if I try to grab a box (let's call it box A) whose index is anything greater than the last box and move it to the last box (box Z), the boxes do not adjust to make room for the incoming box A. It seems to work at every position other than the last.
If you keep the width of the child elements which are to be dragged to be 100% , shapeshift doen't work.
Any plans to include Right align drop containers?
Right now it appears we can center the grid, or have it left aligned.
thoughts?
-Rich
Ok, I know this is more of a tech support issue but...
I've been all over the documentation multiple times and I still can't figure out how you're supposed to catch a dropped object. That is listen for when something is moved.
Basically when somebody drops something I want to capture the new position of the object, create a querystring that will go to a page and update my database with the object's new position.
My code lives in the general script tags area of my site inside the head tag.
Right now I just have an alert to see if the code is picking up the event so here is my code (I've also tried using console.log and it is not being logged):
$containers = $(".container");
$containers.on("ss-arranged", function(e) {
alert("EVENT FIRED");
});
I've also tried ss-event-dropped and ss-rearranged and nothing is firing.
So far, I can't make anything work as far as listening for events. I am sure I am doing something stupid. Other than that the dragging is working great.
Shapeshift does not seem to support items that span multiple columns. Is there any plan to support this in the furture?
When reordering via drag-and-drop often a child element doesn't move to the now-empty position but rather rearranges it's surrounding elements.
Do you think fixing this is easy?
Hello, in relation to paddingX, I'm using it with value 0, in maximized screen everything went ok, but minimizing the screen, it is not equal, I can change some property for that or is it a pattern?
Used 'align: "left"', it set the left side, there would have both sides as well? Right and left?
Another question, in relation to IE8 occurs interference ?
Grateful !
Hey, the plugin is awsome!
Anyway it would be nice if i can have multiple width too. I having some kind of widget system. Currently i'm using masonry to do a drag & drop like thing and it works great but it has 1-2 bugs... I know it's not easy to achieve this, but maybe a solution where you can use a multiplier of the base width (1x170px,2x170px, etc.) to have several sizes would work nice... also support for percentage for fluid/responsive layouts of course...
Elements added to a shapeshifted container can be placed with rearrange, but drag and drop is not enabled for the new elements. It appears that it is only set up during initialization, when enableDrapNDrop is called.
Hello,
I am trying to randomize the position of the elements in my grid.
However, after I shuffle the position in the DOM and rearrange them, I get the same error as Issue #33 when I try to drag one of them.
Uncaught TypeError: Cannot read property 'left' of undefined
ui.position.left = e.pageX - $selected.parent().offset().left - selected_offset_x;
Hi,
I was wondering if you have to at least insert one div in a container make the shapeshift work ?
I've tried something like that :
<div></div>
<div></div>
<div></div>
</div>
<div class="canvas">
<div></div>
</div>
<div class="trash">
</div>
with a script which is the following :
$(".liste").shapeshift({
minColumns: 3,
enableCrossDrop: false,
dragClone: true,
deleteClone: true,
});
$(".canvas").shapeshift({
minColumns: 3,
});
$(".trash").shapeshift({
enableTrash: true
});
But it seems that you can't drag a div into a container if it is empty. Do you confirm ?
Thanks, really cool plugin by the way
The issue only occurs using align 'center' and data-ss-colspan > 1.
The inner div's floating out on the right side of the container and elements are incorrectly centered in the container. It is somehow related to the calculations in:
Plugin.prototype.setGridColumns //inside this function
columns = options.columns || Math.floor((inner_width + gutter_x) / col_width);
grid_width = (columns * col_width) - gutter_x; return globals.child_offset += (inner_width - grid_width) / 2;
An example is the original jsfiddle sample http://jsfiddle.net/McPants/LNysC/light/ when resizing before last container is moved to the next row.
Is there a way to sort elements (hiding all but sorted for) and resetting the grid based on those?
Thanks! Otherwise the plugin is kickass
For my reference when creating v3.0.
I tried to integrate shapeshift in wordpress, but, even if jquery.ui is correctly loaded, I get this alert: Query.shapeshift is trying to enable drag and drop but jQuery UI has not been included yet.
Any idea on where the problem could be?
I'm impressed by the demo, but stuck for lack of documentations.
Out of the box I get a "Shapeshift ERROR: There are child elements that have a larger colspan than the minimum columns set through options.
options.minColumns has been set to 7"
But how do I set options? The docs don't seem to tell me. What does the last line mean?
Cheers -- Pumpapa
i need a way to add some html to grid directly using your plugin
Examples on jsfiddle are fine but it won't easily enable a newbie to use ShapeShift themselves. Can you create demo pages with various options and make it available for download?
Here is my SUPER DUPER SIMPLE DEMO (to understand) and for some bizzare reason... there is an overlap from the hell.... can you tell me how to fix it ?
http://studioteknik.com/jquery.shapeshift-master/demo/mam.html
thanks in advance
I've been having a lot of fun playing with shapeshift.
I'm trying to do something with two shapeshift containers, and I can't figure out how to do it. I think it may not be possible with the current shapeshift.
The overall effect I'm going for is to have a fixed palette of four items, and be able to drag a clone of any of the items into a shapeshift container that accepts cross-drops. Upon dragging an item from the palette, it creates a new clone in the shapeshift container.
So, maybe I'd start off with my palette containing [A B C D] and my shapeshift container empty: [ . . . . . . ]
Then, as I drag, say, B across from the palette to the container, I end up with [A B C D] still in the palette, and [B. . . . . . ] in the container. I could drag another B across to make [B.B. . . . . ], or any of the other letters.
I've tried doing this by setting up two shapeshift containers, setting the "palette" one to enableDrag: true, enableCrossDrop: false, dragClone: true, deleteClone: true, but it's not working as I'd like.
Before I describe the issues I've encountered with this, can you tell me if this is a good way to approach this?
I started off thinking I'd disable drop on the "palette", not just for cross-drops, but for drops from itself. But I can't find a way to do that. Setting deleteClone sort of does it, but it still triggers a re-arrange event. I've also found that the clones behave strangely once they've been dropped onto the target container. For example, if I later drag one into a trash container, the items remain where they were, but all such items (original and clone) stop being draggable.
Any advice is most welcome! Thank you.
When I load, I get.
Uncaught TypeError: Cannot call method 'replace' of undefined jquery.min.js:1
st.extend.camelCase jquery.min.js:1
st.extend.css jquery.min.js:3
(anonymous function) jquery.min.js:3
st.extend.access jquery.min.js:1
st.fn.extend.css jquery.min.js:3
Plugin.arrange jquery.shapeshift.js:245
Plugin.render jquery.shapeshift.js:188
Plugin.init jquery.shapeshift.js:78
Plugin jquery.shapeshift.js:52
(anonymous function) jquery.shapeshift.js:629
st.extend.each jquery.min.js:1
st.fn.st.each jquery.min.js:1
$.fn.(anonymous function) jquery.shapeshift.js:621
Then, when I try to drag it either fails altogether or success but generates many:
Uncaught TypeError: Cannot call method 'replace' of undefined jquery.min.js:1
st.extend.camelCase jquery.min.js:1
st.extend.css jquery.min.js:3
(anonymous function) jquery.min.js:3
st.extend.access jquery.min.js:1
st.fn.extend.css jquery.min.js:3
Plugin.arrange jquery.shapeshift.js:245
Plugin.setTargetPosition jquery.shapeshift.js:539
(anonymous function) jquery.shapeshift.js:97
st.event.dispatch jquery.min.js:2
y.handle jquery.min.js:2
st.event.trigger jquery.min.js:2
(anonymous function) jquery.min.js:2
st.extend.each jquery.min.js:1
st.fn.st.each jquery.min.js:1
st.fn.extend.trigger jquery.min.js:2
$container.children.filter.draggable.drag jquery.shapeshift.js:420
e.Widget._trigger jquery-ui.min.js:5
e.widget._trigger jquery-ui.min.js:5
(anonymous function) jquery-ui.min.js:5
e.widget._mouseDrag jquery-ui.min.js:5
(anonymous function) jquery-ui.min.js:5
e.widget._mouseMove jquery-ui.min.js:5
(anonymous function) jquery-ui.min.js:5
_mouseMoveDelegate jquery-ui.min.js:5
st.event.dispatch jquery.min.js:2
y.handle jquery.min.js:2
making similar feature to ss-event-dropped.
which can be will be useful ss-event-dragged.
Would be good to show an example of the touch enabled code for newbies
First of all thank you for this very great plugin. It has exactly what i need but i want to ask you if it is possible to make a drop placeholder? Like on jQuery Ui Sortable http://jqueryui.com/sortable/#placeholder
Greetings.
Could you perhaps post a few fiddle examples to toy around with?
More of a question, but , I was wondering for dynamic creation and destruction,
do we need to call a delete or destroy? From working with the plugin I'm guessing JQuery Widget Factory isnt being used. any plans for this?
cheers,
Rich
This will be a continuously open thread that will contain a list of the issues that I am aware of and are trying to fix.
Thank you for using FPOImg.com! Your usage of the site as well as others encouraged me to update its look and features. You'll notice your example page has better looking placement images now. You can also check out fpoimg.com to see some of the others you can do now as well as the examples page.
Thanks!
The following line is giving exception:
return augmented_array[offset][1];
I'm creating my div by javascript, interferes with this line?
I realized this only occurs when exist loading the page, if I call the event manually, it works.
I'm in doubt about, catch all elements by "id" in the order they are and move on to an array. And do it at an event after an item has been changed of position.
Hi,
very good plugin that i'm trying to use.
I was wondering if it's possible to specify the drag selector on the options ?
for example :
<div id="boxes">
<div class="box">
<div>content 1</div>
<div class="handle">handle me</div>
</div>
<div class="box">
<div>content 2</div>
<div class="handle">handle me</div>
</div>
</div>
$('#boxes').shapeshift({
dragHandler: '.handle'
});
IE8 does not handle functions.
Cannot drag items...
I like the look of the switch of the dmeo that shows the index status of the DIVs - has the function behind this been made public?
I digress - what's the easiest way to save the state of the DIVs after each drag 'n' drop? I'm designing a customisable dashboard and the elements can be shifted around
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.