ashesofowls / jquery.shapeshift Goto Github PK

View Code? Open in Web Editor NEW

1.7K 89.0 311.0 1.85 MB

A dynamic grid system with drag and drop functionality.

Home Page: http://ashesofowls.github.com/jquery.shapeshift/

License: MIT License

CoffeeScript 100.00%

jquery.shapeshift's Introduction

Shapeshift v2.0

Check out a demo here.

April 16th, 2013: Version 2.0 released. There may be bugs and we are still browser testing. Please report any bugs you find through issues.

Column Grid System + Drag and Drop

Inspired heavily by the jQuery Masonry plugin, Shapeshift is a plugin which will dynamically arrange a collection of elements into a column grid system similar to Pinterest. What sets it apart is the ability to drag and drop items within the grid while still maintaining a logical index position for each item. This allows for the grid to be rendered exactly the same every time Shapeshift is used, as long as the child elements are in the correct order.

Features

Drag and Drop Rearrange items within a container or even drag items between multiple Shapeshift enabled containers. Dragging elements around will physically change their index position within their parent container. When a page reloads, as long as the child elements are placed in the correct order then the grid will look exactly the same.
Works on Touch Devices Shapeshift uses jQuery UI Draggable/Droppable for help with the drag and drop system. Luckily there is already a plugin called jQuery Touch Punch which provides touch support for jQuery UI D/D. It can be found in the vendor folder.
Multiwidth Elements A new feature in 2.0 is the ability to add elements that can span across multiple columns as long as their width is correctly set through CSS.
Responsive Grid Enabled by default, Shapeshift will listen for window resize events and arrange the elements within it according to the space provided by their parent container.

Documentation

Check out our Wiki for full documentation.

Credits

A big thanks to all of our contributors!

Shapeshift is maintained by We The Media, inc.

Sites Using Shapeshift

Got a project that you are using shapeshift on? Let us know and we will happily throw a link to your page here!

For Contributors

Feel like you've got an idea on how to optimize the code and want to share it? We are totally open to new changes, however this is one of the first publically available plugins that I am offering and therefore do not have an exact process on pull requests. Feel free to fork the project all you want, but be aware any pull requests that are made may take a while to get implemented (if at all).

jquery.shapeshift's People

Contributors

Stargazers

Watchers

Forkers

asdi dansmeek robertkraig leison complexytructive drapon sergslon cml815 shrike1 marviljoy aduan liluxdev davioliveira xcntrk anthonykirkham renzhichao hsuching wpcustomize alienx ubiratanbraga parkerproject mattkoyak tony0918 joe73k nvdnkpr moshuohua cyke2006 cyrke chu888chu888 landsurveyorsunited matsnl65 ryanhodson13 break123 demonil thetalisman ftqiuqiu rech wyysf oasisyen mouafa nizaranand spnkr hemantgogia09 calvez cartercole psarmiento1982 washisama derbli kingbill cyberwani jinghm318 myatech kinetikk foryou1989 suprb sudeepdk alanheppenstall cmono chrispolk stevenyoung dillongray treeingwalker altruity toddwf ruzz311 ummae tamcao msoftware leecade neverland gabycasper007 jorgejob arcteryx odesey myusernamejeep devitoz jpellerin sayyidsh fengyiyi tyidnet cron64 m-i f2er lewishankinson charlie8230 pixelpushingpunk yashilanka tatygrassini icggroup abdieffendi krrrishh michaelquiapos wrappery christruman klreierson iq72 iwate pangbornidentity sskyy ruthness

jquery.shapeshift's Issues

Use of trash

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!

Capturing positions by ID

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.

Error when setting columns of different widths

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>

Fire up event after ss-event-arange has stopped working

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;
});

Docs should mention dependency on query-ui

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.

Drag/drop never initialized for added elements

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.

Want feature of adding grid using your plugin

i need a way to add some html to grid directly using your plugin

Trying to create a trash with no div in it

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

css3 gpu driven animations

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?

PaddingX

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 !

Drop placeholder?

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

Iframe as element issue

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.

Capturing a drop

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.

Feature: Dynamic Gutters

For my reference when creating v3.0.

Event Dropped

$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 = $(this).children();
$objects.each(function(i) {
position[i] = $(this).index();
});
});

Uncaught TypeError: Object # has no method 'index'

Multiple width

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...

Right align containers

Any plans to include Right align drop containers?
Right now it appears we can center the grid, or have it left aligned.
thoughts?
-Rich

Can't move an element to the last position

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 width of the child elements is 100%

If you keep the width of the child elements which are to be dragged to be 100% , shapeshift doen't work.

Whole Examples

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?

Problem for IE8

IE8 does not handle functions.
Cannot drag items...

Known Issues - To Do List

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.

Ability to add a "trash" attribute which will destroy the selected element upon dropping.
Add attribute to disable animations upon initialization.
Make Padding X / Y modify the right / bottom sides instead of just from 0,0.
Add support for elements that span multiple widths.
Allow for single columns with 100% width children.
Right align containers.

Documentation: how to set options

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

Shuffling elements gives an error when dragging them (after the Shuffle)

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;

Improve reordering during drag-and-drop

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?

Touch Enabled

Would be good to show an example of the touch enabled code for newbies

Cannot read property '1' of undefined

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.

Placement issue using align 'center' and data-ss-colspan > 1

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.

Save State of DIVs

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

jsFiddle examples?

Greetings.

Could you perhaps post a few fiddle examples to toy around with?

Drag item into empty container

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

Cleaning up

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

GutterX,GutterY in % terms

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

Overlap

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

Event Dragged

making similar feature to ss-event-dropped.
which can be will be useful ss-event-dragged.

Sorting?

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

creating a palette and a canvas container

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.

Display draggable children everywhere

Hi,

just a quick question. How can i achive that my draggable children are on top of every container i have on my page?

Right now they just disappear when i drag them out of the parent container.

Greetings

Uncaught TypeError: Cannot read property 'left' of undefined

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();
});

License Type?

Grid items with multiple column span

Shapeshift does not seem to support items that span multiple columns. Is there any plan to support this in the furture?

IE 8 issue

I want to use this plugin but its not supported in IE 8 can you give me any fix for this?

Uncaught TypeError: Cannot call method 'replace' of undefined

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

FPOImg.com

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!

Explain how to use a little more?

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?

Version 2.0 - Uncaught TypeError: Cannot read property '1' of undefined

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

Drag selector

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'
});