Open Closed

sortable portlet doesn't work #5075


0
jizhongqi created

Hello Support Team I want to make the dashboard portlets are draggable, just like metronic_v5.1/default/dist/default/components/portlets/draggable.html. so I change the portlets in the dashboard to <div class="m-portlet m-portlet--mobile m-portlet--sortable">, if i move the mouse over the portlets it changed to cross mouse, but if I try to drag the portlets, it doesn't work, please tell me how to make this working. thank you very much.


11 Answer(s)
  • 0
    alper created
    Support Team

    hi,

    show what us you have done . you can always ask this to the Metronic professionals on <a class="postlink" href="https://keenthemes.com/forums/">https://keenthemes.com/forums/</a> If you don't have the Metronic license code pls contact to <a href="mailto:info@aspnetzero.com">info@aspnetzero.com</a> with your username

  • 0
    jizhongqi created

    Hi Alper.

    I created a draggable portlet in the html file(Angular5 + framework4.6.1 solution), I don't know what I need to do in the ts file if I want make the portlet draggable, for found there is a js function in the metronic5.1 like:

    var PortletDraggable = function () {

    return {
        //main function to initiate the module
        init: function () {
            $("#m_sortable_portlets").sortable({
                connectWith: ".m-portlet__head",
                items: ".m-portlet", 
                opacity: 0.8,
                handle : '.m-portlet__head',
                coneHelperSize: true,
                placeholder: 'm-portlet--sortable-placeholder',
                forcePlaceholderSize: true,
                tolerance: "pointer",
                helper: "clone",
                tolerance: "pointer",
                forcePlaceholderSize: !0,
                helper: "clone",
                cancel: ".m-portlet--sortable-empty", // cancel dragging if portlet is in fullscreen mode
                revert: 250, // animation in milliseconds
                update: function(b, c) {
                    if (c.item.prev().hasClass("m-portlet--sortable-empty")) {
                        c.item.prev().before(c.item);
                    }                    
                }
            });
        }
    };
    

    }();

    jQuery(document).ready(function() { PortletDraggable.init(); });

    but I don't know how to convert this function to a ts format(write in ts version). and make it works.

    the protlet html is like:

    							&lt;div class=&quot;m-portlet m-portlet--mobile m-portlet--sortable&quot;&gt;
    								&lt;div class=&quot;m-portlet__head&quot;&gt;
    									&lt;div class=&quot;m-portlet__head-caption&quot;&gt;
    										&lt;div class=&quot;m-portlet__head-title&quot;&gt;
    											&lt;span class=&quot;m-portlet__head-icon&quot;&gt;
    												&lt;i class=&quot;flaticon-cogwheel-2&quot;&gt;&lt;/i&gt;
    											&lt;/span&gt;
    											&lt;h3 class=&quot;m-portlet__head-text m--font-brand&quot;&gt;
    												Portlet Action Buttons
    											&lt;/h3&gt;
    										&lt;/div&gt;
    									&lt;/div&gt;
    									&lt;div class=&quot;m-portlet__head-tools&quot;&gt;
    										&lt;ul class=&quot;m-portlet__nav&quot;&gt;
    											&lt;li class=&quot;m-portlet__nav-item&quot;&gt;
    												&lt;a href=&quot;#&quot; class=&quot;m-portlet__nav-link btn btn-accent m-btn m-btn--icon m-btn--icon-only m-btn--pill&quot;&gt;
    													&lt;i class=&quot;la la-tint&quot;&gt;&lt;/i&gt;
    												&lt;/a&gt;
    											&lt;/li&gt;
    											&lt;li class=&quot;m-portlet__nav-item&quot;&gt;
    												&lt;a href=&quot;#&quot; class=&quot;m-portlet__nav-link btn btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--pill&quot;&gt;
    													&lt;i class=&quot;la la-tags&quot;&gt;&lt;/i&gt;
    												&lt;/a&gt;
    											&lt;/li&gt;
    											&lt;li class=&quot;m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push&quot; data-dropdown-toggle=&quot;hover&quot;&gt;
    												&lt;a href=&quot;#&quot; class=&quot;m-portlet__nav-link btn btn-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill   m-dropdown__toggle&quot;&gt;
    													&lt;i class=&quot;la la-ellipsis-v&quot;&gt;&lt;/i&gt;
    												&lt;/a&gt;
    												&lt;div class=&quot;m-dropdown__wrapper&quot;&gt;
    													&lt;span class=&quot;m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust&quot;&gt;&lt;/span&gt;
    													&lt;div class=&quot;m-dropdown__inner&quot;&gt;
    														&lt;div class=&quot;m-dropdown__body&quot;&gt;
    															&lt;div class=&quot;m-dropdown__content&quot;&gt;
    																&lt;ul class=&quot;m-nav&quot;&gt;
    																	&lt;li class=&quot;m-nav__section m-nav__section--first&quot;&gt;
    																		&lt;span class=&quot;m-nav__section-text&quot;&gt;
    																			Quick Actions
    																		&lt;/span&gt;
    																	&lt;/li&gt;
    																	&lt;li class=&quot;m-nav__item&quot;&gt;
    																		&lt;a href=&quot;&quot; class=&quot;m-nav__link&quot;&gt;
    																			&lt;i class=&quot;m-nav__link-icon flaticon-share&quot;&gt;&lt;/i&gt;
    																			&lt;span class=&quot;m-nav__link-text&quot;&gt;
    																				Activity
    																			&lt;/span&gt;
    																		&lt;/a&gt;
    																	&lt;/li&gt;
    																	&lt;li class=&quot;m-nav__item&quot;&gt;
    																		&lt;a href=&quot;&quot; class=&quot;m-nav__link&quot;&gt;
    																			&lt;i class=&quot;m-nav__link-icon flaticon-chat-1&quot;&gt;&lt;/i&gt;
    																			&lt;span class=&quot;m-nav__link-text&quot;&gt;
    																				Messages
    																			&lt;/span&gt;
    																		&lt;/a&gt;
    																	&lt;/li&gt;
    																	&lt;li class=&quot;m-nav__item&quot;&gt;
    																		&lt;a href=&quot;&quot; class=&quot;m-nav__link&quot;&gt;
    																			&lt;i class=&quot;m-nav__link-icon flaticon-info&quot;&gt;&lt;/i&gt;
    																			&lt;span class=&quot;m-nav__link-text&quot;&gt;
    																				FAQ
    																			&lt;/span&gt;
    																		&lt;/a&gt;
    																	&lt;/li&gt;
    																	&lt;li class=&quot;m-nav__item&quot;&gt;
    																		&lt;a href=&quot;&quot; class=&quot;m-nav__link&quot;&gt;
    																			&lt;i class=&quot;m-nav__link-icon flaticon-lifebuoy&quot;&gt;&lt;/i&gt;
    																			&lt;span class=&quot;m-nav__link-text&quot;&gt;
    																				Support
    																			&lt;/span&gt;
    																		&lt;/a&gt;
    																	&lt;/li&gt;
    																	&lt;li class=&quot;m-nav__separator m-nav__separator--fit&quot;&gt;&lt;/li&gt;
    																	&lt;li class=&quot;m-nav__item&quot;&gt;
    																		&lt;a href=&quot;#&quot; class=&quot;btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm&quot;&gt;
    																			Cancel
    																		&lt;/a&gt;
    																	&lt;/li&gt;
    																&lt;/ul&gt;
    															&lt;/div&gt;
    														&lt;/div&gt;
    													&lt;/div&gt;
    												&lt;/div&gt;
    											&lt;/li&gt;
    										&lt;/ul&gt;
    									&lt;/div&gt;
    								&lt;/div&gt;
    								&lt;div class=&quot;m-portlet__body&quot;&gt;
    									Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
    								&lt;/div&gt;
    							&lt;/div&gt;
    

  • 0
    alper created
    Support Team

    Import the related javascript

    default/dist/default/assets/demo/default/custom/components/portlets/draggable.js

  • 0
    jizhongqi created

    hello,

    please could you tell me how to import the js file for angular aspzero solution? import to the html file or ts file? I tried to import to the html file, but it doesn't work.

  • 0
    ismcagdas created
    Support Team

    @jizhongqi, put it into scripts array of .angular-cli.json file.

  • 0
    jizhongqi created

    Hi,

    it works after I made the following changes: 1, add following line to "devDependencies" of package.json. "@types/jqueryui": "1.11.28",

    1. add following lines to "scripts" array of .angular-cli.json "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jqueryui/jquery-ui.js",

    and finally, add the js function to the ngAfterViewInit(): void {} in the ts file.

  • 0
    alper created
    Support Team

    thanks for the feedback ;)

  • 0
    thor created

    Hi,

    Thank you for sharing. I am trying to do a similar thing. However, I am facing a few problems. When you were implementing this, did you encounter the following problem with the draggable.js script in ngAfterViewInit (and if so, did you find a solution):

    ERROR in src/app/main/demographics/patient-details/patient-details.component.ts(95,25): error TS2345: Argument of type '{ connectWith: string; items: string; opacity: number; handle: string; coneHelperSize: boolean; p...' is not assignable to parameter of type 'SortableOptions'. Object literal may only specify known properties, but 'coneHelperSize' does not exist in type 'SortableOptions'. Did you mean to write 'forceHelperSize'? src/app/main/demographics/patient-details/patient-details.component.ts(100,25): error TS1117: An object literal cannot have multiple properties with the same name in strict mode. src/app/main/demographics/patient-details/patient-details.component.ts(100,25): error TS2300: Duplicate identifier 'tolerance'. src/app/main/demographics/patient-details/patient-details.component.ts(101,25): error TS1117: An object literal cannot have multiple properties with the same name in strict mode. src/app/main/demographics/patient-details/patient-details.component.ts(101,25): error TS2300: Duplicate identifier 'forcePlaceholderSize'. src/app/main/demographics/patient-details/patient-details.component.ts(102,25): error TS1117: An object literal cannot have multiple properties with the same name in strict mode. src/app/main/demographics/patient-details/patient-details.component.ts(102,25): error TS2300: Duplicate identifier 'helper'.

  • 0
    ismcagdas created
    Support Team

    Hi @thor,

    Could you share the related code ?

    I think you need to create a new SortableOptions and then set it's properties instead of using it like '{ connectWith: string;.....}'

  • 0
    thor created

    Thank you for getting back to me. As always, I am very grateful for the help you all provide and I think you are doing a great job with the platform.

    I forgot to run yarn after I had added the reference into package.json. Once this was done the problem went away!

  • 0
    ismcagdas created
    Support Team

    Great :)