javascript - Jqueryui multiple select d&d containment -

-

hy all, implemented jqueryui drag , drop , jqueryui selectable, , can move 2 objects if select both of it. problem when doing this, containment parent works on clicked element , other selected element can move out parent. here draggable , selectable imlementation:

draggable: {         init: function(el, options) {              if (options == undefined) {                 options = {                      containment: "parent"                 };             }             $(el).draggable(options, {                 scroll: false,                 snap: '.gridlines',                 snaptolerance: $('.grid').attr('data-size') / 2,                 revert: "invalid",                  drag: function(event, ui) {                                     selectedcomponent = $(this);                 },                 start: function(event, ui) {                                             if ($(this).hasclass("ui-selected")){                         selected = $(".ui-selected").each(function() {                            var el = $(this);                            el.data("offset", el.offset());                         });                     }                     else {                         selected = $([]);                         $(".playground").find('.existing-component').removeclass("ui-selected");                     }                      offset = $(this).offset();                 },                 stop: function(event, ui) {                     $('.gridlines').removeclass('highlighted');                     $('.obstacles').remove();                      if (!$(this).hasclass('ui-selected')) $(this).addclass('ui-selected')                 }              });         },         update: function(el, optionname, optionvalue) {               $(el).resizable( "option", optionname, optionvalue );             }     }, selectable: {         init: function(el) {             $(el).selectable({                 filter: '.existing-component',                  selecting: function (event, ui) {                     $(event.target).children('.ui-selecting').find('.existing-component').removeclass('ui-selecting');                 },                 stop: function(event, ui) {                     var selecteditems = $('.ui-selected', this);                     if (selecteditems.length >= 2) {                         $('.ui-selected').addclass('ui-selecting-multiple');                     }                 },                 selected: function(event, ui) {                     selectedcomponent = $(ui.selected);                                              }             });              $(el).find('.existing-component').click( function(e){                 if (!e.shiftkey) {                     $(el).find('.existing-component').removeclass("ui-selected ui-selecting-multiple");                     $(el).find('.existing-component').attr('style', function(i, style)                     {                         return style.replace('z-index: 999', '');                     });                     $(this).addclass("ui-selecting");                 } else {                     if ($(this).hasclass("ui-selected")) {                          $(this).removeclass("ui-selected ui-selecting-multiple");                 }                 else {                     $(this).addclass("ui-selecting");                  }             }              $(el).data("ui-selectable")._mousestop();              e.stoppropagation();         });     } }

how apply containment:parent selected component?

i didn`t find solution problem because of implement own solution, on multiselect calculate elements on left,top,bottom,right (multipleminl,multiplemint,multiplemaxb,multiplemaxr) , reinitialize each multiselected component calculated values:

$('.ui-selecting-multiple').each(function() {     left = (multipleminl.offset().left - multipleminl.position().left) + $(this).offset().left - multipleminl.offset().left;     top =  (multiplemint.offset().top - multiplemint.position().top) + $(this).offset().top - multiplemint.offset().top;     width = $(this).offset().left + ($(this).parent().outerwidth() - multiplemaxr.position().left - multiplemaxr.outerwidth());     height = $(this).offset().top + ($(this).parent().outerheight() - multiplemaxb.position().top - multiplemaxb.outerheight());     draggable.init($(this), {containment: [left,top,width,height]}); });

and on other action before ui-selecting-multiple class removed reinitialize each component

draggable.init('.ui-selecting-multiple', containment:'parent');

this works me, if got better solution please post it.


Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more