11. 2 Xây dựng chức năn kéo thả clone (ok)

C:\xampp\htdocs\test\wp-content\plugins\plugin-name\admin\js\wpf-themplate_ct.js

var WPF;
(function ($, window, document, undefined) {
	// Builder Function
	WPF = {
		prefix: 'wpf_ct_',
		template_type: false,
		init: function ($options) {
			$options = $.extend({
        prefix: this.prefix,
        template_type: this.template_type
    	},$options);
    	this.prefix = $options.prefix;
      this.template_type = $options.template_type;
      this.bindEvents();
		},
		bindEvents: function () {
			this.Save();
			this.InitDraggable();
			this.InitSortable();
		},
		Save: function () {
			var self = this;
			$('#' + self.prefix + 'submit').click(function (event) {
				event.preventDefault();
				var $form = $(this).closest('form'),
				$inputs = $('.' + self.prefix + 'back_builder').find('input,select,textarea');
				$inputs.prop('disabled', true);
				setTimeout(function () {
					var $data = self.ParseData();
					console.log($data);
				}, 100);
			});
		},
		ParseData: function () {
			var $wrapper = $('#' + WPF.prefix + 'module_content'),
			$data = {},
			$modules = $wrapper.find('.' + WPF.prefix + 'back_active_module_content');
		},
		InitDraggable: function () {
			var $this = this;
			$('.' + $this.prefix + 'back_module_panel .' + $this.prefix + "back_module").draggable({
				appendTo: ".wpf_ct_back_row_content",
        helper: "clone",
        revert: 'invalid',
        snapMode: "inner",
        connectToSortable: '.' + $this.prefix + "module_holder",
        stop: function (event, ui) {
        	var $item = $(ui.helper[0]), $type = $item.data('type');
        	if ($('#' + $this.prefix + 'module_content').find('[data-type="' + $type + '"]').length > 0) {

        	}
        }
			});
		},
		InitSortable: function () {
			var $this = this;
			$('.' + $this.prefix + "module_holder").sortable();
		}
	}
}(jQuery, window, document));

C:\xampp\htdocs\test\wp-content\plugins\plugin-name\admin\class-wpf-admin_ct.php

<?php
class WPF_Admin_CT {
  private $plugin_name;
  private $version;
  public function __construct($plugin_name, $version) {
    $this->plugin_name = $plugin_name;
    $this->version     = $version;
    add_action('admin_menu', array($this, 'add_plugin_admin_menu_ct'));
    add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'), 11);
    add_action('wp_ajax_wpf_add_ct', array($this, 'add_template'));
    add_action('wp_ajax_wpf_ct_ajax_themes_save',array($this,'save_themplate'));
  }
  public function add_plugin_admin_menu_ct() {
    add_menu_page(
      __('Product Filters', 'wpf_ct'), __('Lionel Product Filters', 'wpf_ct'), 'manage_options', 'wpf_search_ct', array($this, 'display_search_forms_ct'), 'dashicons-welcome-write-blog', '50'
    );
    $this->plugin_about_page();
  }
  public function plugin_about_page() {
    add_submenu_page(
      'wpf_search_ct',
      __('About', 'wpf'),
      __('About', 'wpf'),
      'manage_options',
      'wpf_about',
      array($this, 'create_about_page')
    );
  }
  public function display_search_forms_ct() {
    include_once 'partials/list_ct.php';
  }
  public function enqueue_scripts($hook) {
    $screen = get_current_screen();
    if ($screen->id != 'customize') {
      $plugin_dir = plugin_dir_url(__FILE__);
      wp_register_script($this->plugin_name, $plugin_dir . 'js/wpf-admin_ct.js', array('jquery'), $this->version, false);
      wp_enqueue_script($this->plugin_name);
      wp_enqueue_style($this->plugin_name, $plugin_dir . 'css/wpf-themplate.css', array(), $this->version, 'all');
      wp_enqueue_script($this->plugin_name.'-template', $plugin_dir . 'js/wpf-themplate_ct.js', array('jquery'), $this->version, false);
      wp_enqueue_script('jquery-ui-core');
      wp_enqueue_script('jquery-ui-sortable');
      wp_enqueue_script('jquery-ui-draggable');
      wp_enqueue_script('jquery-ui-droppable');
    }
  }
  public function add_template() {
    check_ajax_referer($this->plugin_name . '_edit', 'nonce', true);
    if (current_user_can('manage_options')) {
      if ($_REQUEST['action'] === 'wpf_edit' && !empty($_REQUEST['slug'])) {
        global $cpt_id;
        $cpt_id = sanitize_key($_REQUEST['slug']);
      }
      include_once 'partials/form_ct.php';
    }
    wp_die();
  }
  public function save_themplate(){
    check_ajax_referer($this->plugin_name .'_them_ajax', $this->plugin_name .'_nonce', true);
    $form = new WPF_Form_CT($this->plugin_name,$this->version);
    $result = $form->save_themplate($_POST);
    if($result){
      echo  wp_json_encode($result);
    }
    wp_die();
  }
}
?>

C:\xampp\htdocs\test\wp-content\plugins\plugin-name\includes\class-wpf-utils_ct.php

<?php
class WPF_Utils_CT {
  public static function get_wc_attributes($receate = FALSE) {
    static $attributes = null;
    if (is_null($attributes)) {
      $attribute_taxonomies = wc_get_attribute_taxonomies();
      if (!empty($attribute_taxonomies)) {
        foreach ($attribute_taxonomies as $tax) {
          $name              = wc_attribute_taxonomy_name($tax->attribute_name);
          $attributes[$name] = $tax->attribute_label ? $tax->attribute_label : $tax->attribute_name;
        }
      } else {
        $attributes = array();
      }
    }
    return $attributes;
  }
  public static function get_default_fields() {
    static $labels = array();
    if (empty($labels)) {
      $labels = array(
        'title'   => __('Product Title', 'wpf'),
        'sku'     => __('SKU', 'wpf'),
        'wpf_ct_cat' => __('Category', 'wpf'),
        'wpf_ct_tag' => __('Tag', 'wpf'),
        'price'   => __('Price', 'wpf'),
        'instock' => __('In Stock', 'wpf'),
        'onsale'  => __('On Sale', 'wpf'),
        'submit'  => __('Submit Button', 'wpf'),
      );
    }
    return $labels;
  }
  public static function module_multi_text($id, array $data, array $languages, $key, $name, $input = 'text', $placeholder = false) {
  ?>
    <div class="wpf_back_active_module_row">
        <?php if (!$placeholder): ?>
          <div class="wpf_back_active_module_label">
            <label for="wpf_<?php echo $id ?>_<?php echo $key ?>"><?php echo $name; ?></label>
          </div>
        <?php endif; ?>
        
    </div>
    <?php
  }
}
?>