I am trying to use jQuery sortable within the TinyMCE Visual Editor in WordPress. I have had some success in that I can get a UL list to sort, but only if I drag the mouse OUTSIDE of the actual editor.

So to say: It seems that the mouse pointer to list element movement ratio is wrong. If I move (for e.g.) 10px with the pointer, the list element only moves 1px.

You can see what I mean with this short 1 minute screencast video: enter image description here

click image to see screencast

Here is the code I am using to run this [note: I have edited the code to a working version]:

(function() {
   tinymce.create('tinymce.plugins.tinyMceSort', {
      init : function(ed, url) {
         ed.addButton('tinymcesort', {
            title : 'TinyMCE Sort',
            image : url+'/tiny_sort.png',
            onclick : function() {
                 ed.execCommand('mceInsertContent', false, '\
                    <ul id="list">\

        ed.onVisualAid.add(function(ed, e, s) {
            jQuery('#content_ifr').contents().find('#list').sortable({ containment : 'parent', tolerance : 'pointer', cursor : 'move'}).css({'width' : '200px', 'padding' : '10px', 'list-style' : 'none', 'background-color' : '#333'});
            jQuery('#content_ifr').contents().find('li').css({'background-color' : 'grey', 'margin': '10px', 'padding': '10px'});

    createControl : function(n, cm) {
      return null;
    getInfo : function() {
      return {
        longname : "Buildpress Columns",
        author : 'Moshe Morris',
        authorurl : 'http://getbuildpress.com/',
        infourl : 'http://getbuildpress.com/',
        version : "1.0"
   tinymce.PluginManager.add('tinymcesort', tinymce.plugins.tinyMceSort);


What I would like to know is what do I have do in order to sort the list WITHOUT having to move the mouse outside of the TinyMCE Editor area.

Edit: Here is the other code that relates to the plugin:

Plugin Name: TinyMCE Sort

define( 'TINYMCE_SORT_URI', trailingslashit( plugin_dir_url( __FILE__ ) ) );
add_action('init', 'tinymce_sort_init');
function tinymce_sort_init() {
  if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')

  add_filter("mce_external_plugins", "tinymce_sort_register_plugin"); 
  add_filter('mce_buttons', 'tinymce_sort_add_tbutton');

function tinymce_sort_register_plugin($plugin_array) {
    $plugin_array['tinymcesort'] = TINYMCE_SORT_URI . '/tinymce/editor_plugin.js';
    return $plugin_array;

function tinymce_sort_add_tbutton($buttons) {
  array_push( $buttons, "|", "tinymcesort" );
  return $buttons;

add_filter( 'tiny_mce_version', 'my_refresh_mce');
function my_refresh_mce($ver) {
  $ver += 3;
  return $ver;

add_action( 'admin_enqueue_scripts', 'add_tinymce_sort_jquery' );
function add_tinymce_sort_jquery() {
  wp_register_script( 'tinymce_sort_jquery_ui', TINYMCE_SORT_URI . 'js/jquery_ui.js', array('jquery'), false, '1.10.2');
  wp_enqueue_script( 'tinymce_sort_jquery_ui');

Final note: You will notice that I am NOT using the jquery-ui version that is included with Wordpress - I couldn't get it to work. I simply copied and pasted from Google APIs. Here is the link for your convenience: ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js.

  • Very well formatted question. I updated it a bit. Still not sure if it wouldn't be better to move it to SO. – kaiser Apr 26 '13 at 11:23
  • Aside from that, the code like it is, can't be taken and moved to a test plugin as it doesn't work. Please fix the code, so we can test and use it - there're abandoned/orphaned brackets, etc. – kaiser Apr 26 '13 at 11:30
  • I have uploadded a zip file containing the code for the plugin (I've tested it on my computer and it works). You can download it here: screencast.com/t/BSeF4KIgWz [Look for the line that says: "Unable to embed this content type. Download this media." and click on Download this media.] Thanks for your help – user15927 Apr 28 '13 at 9:20
  • Seriously? Please add your code in here. External resources like this one aren't valid for a question. If you can't do that, then I recommend closing it as too localized - it's already close to off topic as it's javascript only. – kaiser Apr 28 '13 at 13:47
  • Okay - sorry about that. I have edited the entry - please let me know if it works now. Thanks again, Moshe – user15927 Apr 28 '13 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy