خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

jQuery jQueryUI - Sortable not Behaving as Expected

I have the following code which generates DOM elements via a JSON literal: https://codepen.io/anon/pen/dVWGyO?editors=1010

What I am attempting to do is allow the user to move the dynamic elements between containers so long as their class name matches the class name of the desired container. Essentially there are three container class names: boat, barge, and pair. What is happening right now is that I can use sortable to move boat between only the boat containers, barge between both the boat and barge containers, but neither can move into the pair container. What I expect to happen is to have boat only move between boat and pair and barge only move between barge and pair.

Here is the relevant jQuery code that I'm using:
Code:
$(document).ready(function(){
  var assets = $.parseJSON('[{"Type":"Boat","Name":"Name","Official_Number":"Number","Length":78,"Breadth":34,"Depth":10,"Gross_Tons":222,"HP":2000,"Engine":"Engine","Built":2016,"Status":"Standby"},{"Type":"Barge","Name":"Name","Official_Number":"Number","Length":297.5,"Width":54,"Depth":12,"BBL":30000,"Heater":"Heater","Built":2015,"Status":"Standby"}]');

  $.each(assets, function(index, value) {
    var dom = jQuery('<div/>', {
      class: value.Type.toLowerCase(),
      style: 'cursor: move; margin-bottom: 0.5em;'
    });
   
    if (value.Type === 'Boat') {
      dom.addClass('bg-success');
     
      // Name
      jQuery('<p>', {
        class: 'font-weight-bold text-center',
        text: value.Name
      }).appendTo(dom);
     
      // Official Number, Length, Breadth, and Depth
      jQuery('<p>', {
        class: 'text-center',
        style: 'padding: 0; margin: 0;',
        text: 'Official #' + value.Official_Number + ' ' + value.Length + "'x'" + value.Breadth + "'x'" + value.Depth + "'"
      }).appendTo(dom);
     
      // Gross Tons and HP
      jQuery('<p>', {
        class: 'text-center',
        style: 'padding: 0; margin: 0;',
        text: 'Gross Tons ' + value.Gross_Tons + ' | ' + value.HP + 'HP'
      }).appendTo(dom);
     
      // Engine and Built
      jQuery('<p>', {
        class: 'text-center',
        style: 'padding: 0; margin: 0;',
        text: value.Engine + ' Built in ' + value.Built
      }).appendTo(dom);
    } else {
      dom.addClass('bg-danger');
     
      // Name
      jQuery('<p>', {
        class: 'font-weight-bold text-center',
        text: value.Name
      }).appendTo(dom);
     
      // Official Number, Length, Width, and Depth
      jQuery('<p>', {
        class: 'text-center',
        style: 'padding: 0; margin: 0;',
        text: 'Official #' + value.Official_Number + ' ' + value.Length + "'x'" + value.Width + "'x'" + value.Depth + "'"
      }).appendTo(dom);
     
      // Capacity and Built
      jQuery('<p>', {
        class: 'text-center',
        style: 'padding: 0; margin: 0;',
        text: value.Capacity + ' BBL | ' + ' Built in ' + value.Built
      }).appendTo(dom);
     
      // Heater
      jQuery('<p>', {
        class: 'text-center',
        style: 'padding: 0; margin: 0;',
        text: value.Heater
      }).appendTo(dom);
    }
   
    $('.' + value.Type.toLowerCase() + '.' + value.Status.toLowerCase()).append(dom);
  });
 
  $(".col.boat").sortable({
    coectWith: ".col.boat, .col.pair"
  });
  $(".col.barge").sortable({
    coectWith: ".col.barge, .col.pair"
  });
});
So my question is, why is it that I can move .barge into .boat and why can't either .barge or .boat move into .pair?

برچسب: نویسنده: آیلین رضوانی تاريخ: جمعه 7 مهر 1396 ساعت: 10:54

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه