Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

Recently, I used the sorting and drag functions of jQuery UI in my work. I spent about one day to figure out the general parameter configuration and some problems encountered, which are summarized as follows.


The simple configuration is as follows:

    axis: 'y'.cursor: 'ns-resize'.placeholder: "ui-state-highlight".// Class style setting for placeholders during sorting
    forcePlaceholderSize: true.// Force placeholders to have a size.
    handle:'.sort-at'.// Start dragging on the element specified in the object instead of the entire element
    distance: 10.opacity: 0.8Containment:'parent'.// The element can drag the sort range
    // Helper: 'clone', // Whether to clone an element and drag it
    items: '.subject'.// Specify which elements can be sorted
    stop: function (e, ui) {
        // The order of the elements after sorting (if each element has an ID attribute)
        let newSubArr = $("#subs-box").sortable('toArray'); 
}).disableSelection(); // Disallow element selection while dragging
Copy the code

There are also some sorting events and methods, which can be found in the reference documentation.


dragInit() {
    let me = this;
    let selector = '.ptype-'+me.selectedSubType;

    // Title drag
    $('#subs-box .subject').draggable({
        AppendTo: ".ptype-item.radio", // Drag the element to which the component helper should be added when dragging.
        ConnectToSortable: "#subs-box", // allows draggable to be dragged to the specified sortables.

        // Use the clone element when dragging. If the value is set to "clone", the element will be copied and the copied element will be dragged.
        // The reason why helper: 'clone' is not used is because clone elements have no styles, so we need to customize styles, so we use custom functions.
        helper: function() {
            let helper = $(this).clone();
            helper.css({'width': $(this).width(), 'background': '#fff'}); // Set the clone element style
            return helper;
        handle: ".drag-at".// Specify that you can drag only when a mouse-down event is triggered on a specific element.
        cursor: 'move'.// containment: '. Sub-box ', // limits draggable to the boundary of the specified element or region.
        revert: 'invalid'.// If set to true, the element position will be reset when the drag stops.
        revertDuration: 200.distance: 10.opacity: 0.8.zIndex: 10000.refreshPositions: true.// All draggable positions are counted each time the mouse moves. (Setting this value makes the drop location more precise)
        start(event, ui) {
            $(selector).addClass('allow'); // When you drag an element, set the style of the element that can be placed, indicating that you can drag it there
            // Initialize drop when you start dragging
            me.$nextTick(() = >{
        stop(event, ui) {
            // Destroy the drop function when the drag stops.

Copy the code

Matters needing attention:

Each time the dropInit function is initialized, if it needs to be initialized again, it needs to destroy the previously placed object. Otherwise, after the first initialization, for example, you can put the drag element somewhere, but after the second initialization, you can’t put the drag element somewhere. However, in fact, if you don’t destroy the dropInit function initialized the first time, place A can still be placed after the second initialization. So you need to destroy the last dropInit object when the drag stops.


dropInit() {
    let me = this;
    // topic placement (set topic can be placed in different pages according to different types)
    // Selector is mutable, which means that every time you can drag an element you can place a different element. So you need to clean up the previous dropInit object after each drag.
    let selector = '.ptype-'+me.selectedSubType;

        // accept: selector,
        // accept: function(d) {
        // if($(this).hasClass('ptype'+me.selectedSubType)){
        // console.log('d>>>>>>',$(this)[0]);
        // return true;
        / /}
        // },
        // hoverClass: "drop-hover",
        tolerance: 'pointer'.// Specify which mode to use to test a draggable element "passing" over a droppable object
        drop: function( event, ui ) {
            // The element that $(this) fills in
            // ui.draggable.context fills the element
            let dragId = $(ui.draggable.context).attr('id');
            let dropId = $(this).attr('id');

            // Move to a new page
            if(dropId === 'newpage') {
            } else { // Move the topic to another page
                if(dropId === me.selectedPage.id) { // Move to its own group without processing

                } else {
                    let index = me.selectedPage.subs.indexOf(dragId);
                    if(index > -1) {
                        me.selectedPage.subs.splice(index, 1);

                        me.pages.forEach(page= >{
                            if(page.id === dropId) { page.subs.push(dragId); }}); me.$openNotice('Move successful');

                        // Other operations...}}} $(this).removeClass('allow-hover');
        over(event, ui){$(this).addClass('allow-hover'); // When you drag an element into a playable element, you can place the style of the element itself
        out(){$(this).removeClass('allow-hover'); // Sets the drag element away from the placing element to clear the style of the placing element itself}}); },dropDestory() {
    let selector = '.ptype-'+me.selectedSubType;
Copy the code

Refer to the link

  • www.html.cn/jquery-ui-a…
  • www.html.cn/jquery-ui-a…
  • www.html.cn/jquery-ui-a…


Recent hot articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • Vue. Js Naming Style Guide (Easy to remember Version)

For more exciting content, follow me to get more front-end technology and personal growth related content, I believe interesting people will meet eventually!

It is said that those who give a “like” will be lucky enough to get a promotion and a raise a month later