You can drag around the single items -- the content will be still editable.
Forked from draftkraft/Aloha-Editor-jQueryUI-sortable
Created
February 15, 2012 13:35
-
-
Save evo42/1835700 to your computer and use it in GitHub Desktop.
jQuery Ui sortable demo with Aloha Editor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <!-- Example JavaScript files --> | |
| <script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/vendor/jquery-1.7.2.js"></script> | |
| <script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/require.js"></script> | |
| <script> | |
| var Aloha = {}; | |
| Aloha.settings = { | |
| jQuery: $ | |
| } | |
| </script> | |
| <link href="http://cdn.aloha-editor.org/latest/css/aloha.css" type="text/css" rel="stylesheet" /> | |
| <script type="text/javascript" | |
| src="http://cdn.aloha-editor.org/latest/lib/aloha.js" | |
| data-aloha-plugins="common/format,common/list,common/link,common/highlighteditables,common/undo" | |
| ></script> | |
| <style> | |
| .column { | |
| width: 170px; | |
| float: left; | |
| padding-bottom: 100px; | |
| } | |
| .portlet { | |
| margin: 0 1em 1em 0; | |
| } | |
| .portlet-header { | |
| margin: 0.3em; | |
| padding-bottom: 4px; | |
| padding-left: 0.2em; | |
| } | |
| .portlet-content { | |
| padding: 0.4em; | |
| } | |
| .ui-sortable-placeholder { | |
| border: 1px dotted black; | |
| visibility: visible !important; | |
| height: 50px !important; | |
| } | |
| #footer { | |
| clear: both; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>jQuery Ui sortable demo</h1> | |
| <p>You can use dynamic jQuery together with Aloha Editor. | |
| <!-- Example row | |
| of columns --> | |
| <div class="row"> | |
| <div id="data-1" class="span-one-third editable"> | |
| <h2>Heading</h2> | |
| <p>Try to edit this.</p> | |
| <p> <a class="btn" href="#">View details »</a> | |
| </p> | |
| </div> | |
| </div> | |
| <br clear="all" /> | |
| <h1>You can sort</h1> | |
| <div class="column"> | |
| <div class="portlet"> | |
| <div class="handle">Drag me here</div> | |
| <div class="editable">TITLE 1</div> | |
| <div class="editable">I am editable.</div> | |
| </div> | |
| <div class="portlet"> | |
| <div class="handle">Drag me here</div> | |
| <div class="editable">TITLE 2</div> | |
| <div class="editable">I am editable.</div> | |
| </div> | |
| </div> | |
| <div class="column"> | |
| <div class="portlet"> | |
| <div class="handle">Drag me here</div> | |
| <div class="editable">TITLE 3</div> | |
| <div class="editable">I am editable.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p id="footer">Thanks to Markos for this example <a href="https://getsatisfaction.com/people/markos_3584778">Markos</a>.</p> | |
| <script type="text/javascript"> | |
| Aloha.ready(function() { | |
| $('#data-1').aloha(); | |
| $('.editable').aloha(); | |
| }); | |
| jQuery(document).ready(function() { | |
| jQuery(".column").sortable({ | |
| // Add a handle otherwise the mouse and | |
| // selection are interfering with the editables | |
| handle: ".handle", | |
| connectWith : ".column" | |
| }); | |
| // Don't user disableSelection(); | |
| //jQuery( ".column" ).disableSelection(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It helped, finally I can load the Aloha script successfully right after loading my jquery and jquery ui script files.
However, when I try to drag a sortable item, it creates a bunch of divs very quickly at the bottom of my list. This didn't happen before Aloha was installed.
Could it be Aloha is preventing the items from being dragged and that confuses jQuery UI?
Thanks