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
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:[email protected]">[email protected]</a> with your username
-
0
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:
<div class="m-portlet m-portlet--mobile m-portlet--sortable"> <div class="m-portlet__head"> <div class="m-portlet__head-caption"> <div class="m-portlet__head-title"> <span class="m-portlet__head-icon"> <i class="flaticon-cogwheel-2"></i> </span> <h3 class="m-portlet__head-text m--font-brand"> Portlet Action Buttons </h3> </div> </div> <div class="m-portlet__head-tools"> <ul class="m-portlet__nav"> <li class="m-portlet__nav-item"> <a href="#" class="m-portlet__nav-link btn btn-accent m-btn m-btn--icon m-btn--icon-only m-btn--pill"> <i class="la la-tint"></i> </a> </li> <li class="m-portlet__nav-item"> <a href="#" class="m-portlet__nav-link btn btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--pill"> <i class="la la-tags"></i> </a> </li> <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover"> <a href="#" class="m-portlet__nav-link btn btn-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill m-dropdown__toggle"> <i class="la la-ellipsis-v"></i> </a> <div class="m-dropdown__wrapper"> <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span> <div class="m-dropdown__inner"> <div class="m-dropdown__body"> <div class="m-dropdown__content"> <ul class="m-nav"> <li class="m-nav__section m-nav__section--first"> <span class="m-nav__section-text"> Quick Actions </span> </li> <li class="m-nav__item"> <a href="" class="m-nav__link"> <i class="m-nav__link-icon flaticon-share"></i> <span class="m-nav__link-text"> Activity </span> </a> </li> <li class="m-nav__item"> <a href="" class="m-nav__link"> <i class="m-nav__link-icon flaticon-chat-1"></i> <span class="m-nav__link-text"> Messages </span> </a> </li> <li class="m-nav__item"> <a href="" class="m-nav__link"> <i class="m-nav__link-icon flaticon-info"></i> <span class="m-nav__link-text"> FAQ </span> </a> </li> <li class="m-nav__item"> <a href="" class="m-nav__link"> <i class="m-nav__link-icon flaticon-lifebuoy"></i> <span class="m-nav__link-text"> Support </span> </a> </li> <li class="m-nav__separator m-nav__separator--fit"></li> <li class="m-nav__item"> <a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm"> Cancel </a> </li> </ul> </div> </div> </div> </div> </li> </ul> </div> </div> <div class="m-portlet__body"> 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. </div> </div>
-
0
Import the related javascript
default/dist/default/assets/demo/default/custom/components/portlets/draggable.js
-
0
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
@jizhongqi, put it into scripts array of .angular-cli.json file.
-
0
Hi,
it works after I made the following changes: 1, add following line to "devDependencies" of package.json. "@types/jqueryui": "1.11.28",
- 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
thanks for the feedback ;)
-
0
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
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
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
Great :)
