Регистрация всех изменений (удалить или выбрать) внутри div - PullRequest
Новая
       48

Регистрация всех изменений (удалить или выбрать) внутри div

1 голос
/ 18 января 2020

Я понимаю, что этот вопрос очень конкретен c, но надеялся получить некоторую помощь с моим кодом. Я хочу отслеживать содержимое сбрасываемого элемента div, в котором некоторые из блоков имеют выделенные элементы внутри [TTEST и CHG], и блоки также можно удалять с помощью кнопки.

enter image description here

enter image description here

Я пытался добавить прослушиватель событий, но вам нужно перетащить новый блок для выбора, чтобы обновить и удалить блок, также не вызывает изменения в agg_output. Может ли кто-нибудь помочь заставить мой MutationObserver делать то, что я от него ожидаю: Всякий раз, когда пользователь перетаскивает блок, изменяет порядок блоков, удаляет блок ИЛИ изменяет выбранное раскрывающееся меню, agg_output должен отражать это - и удаление блока только иногда меняет agg_output

$(function() {
  $("#sortable_agg").sortable();
  $("#sortable_agg").disableSelection();
});

// remove the item from the list
$("#d_agg").on('click', '.delete', function() {
  $(this).parent().remove();
});

// get the length every select in the droppable div
// create unique ids for each
function getNewId(type) {
  var newId;
  newId = $('#droppable').find('select').length
  return type + (newId + 1);
}

$(function() {
  $(".blocks").draggable();
  $('#droppable_blocks').droppable({
    accept: ".block",
    drop: function(event, ui) {
      var draggableId = ui.draggable.attr("id");
      var newid = getNewId(draggableId);

      $(this).append(`
        <div>
        <div>
        <div class="form-group drop_area">
        <label class="control-label" for="${newid}">${newid.replace(/[0-9]/g, '').toUpperCase()}</label>
        <button class="delete">Delete</button>
        </div>
        </div>
        </div>`)
    }
  }).sortable({
    revert: false
  })
})


$(function() {
  $(".draggable_agg").draggable();
  $("#droppable_agg").droppable({
    accept: ".agg",
    drop: function(event, ui) {
      var draggableId = ui.draggable.attr("id");
      var newid = getNewId(draggableId);
      if (draggableId.includes("ttest")) {
        $(this).append(`<div class="form-group drop_area">
                        <label class="control-label" for="${newid}">T-TEST</label>
                        <select id="${newid}">
                        <option value="week1" selected>Week 1</option>
                        <option value="week2">Week 2</option>
                        <option value="week3">Week 3</option>
                        <option value="week4">Week 4</option></select>
                        <button class="delete">Delete</button>
                        </div>`)
      } else if (draggableId.includes("chg")) {
        $(this).append(`<div class="form-group drop_area">
                        <label class="control-label" for="${newid}">CHG</label>
                        <select id="${newid}">
                        <option value="week1" selected>Week 1</option>
                        <option value="week2">Week 2</option>
                        <option value="week3">Week 3</option>
                        <option value="week4">Week 4</option></select>
                        <button class="delete">Delete</button>
                        </div>`)
      } else {
        $(this).append(`
        <div>
        <div>
        <div class="form-group drop_area">
        <label class="control-label" for="${newid}">${newid.replace(/[0-9]/g, '').toUpperCase()}</label>
        <button class="delete">Delete</button>
        </div>
        </div>
        </div>`)
      }
    }
  }).sortable({
    revert: false
  })
});


var target = document.querySelector('#droppable_agg')
var observer = new MutationObserver(function(mutations) {
  var str = "";
  $('#droppable_agg label').each(function() {
    const txt = $(this).text()
    const val = $(this).parent().find("select").children("option:selected").val()
    str += "<tr><td>" + txt + (val ? ": " + val : "") + "</td></tr>";
  })
  let str_to_table = '<table>' + str + '</table>'
  document.getElementById("agg_output").innerHTML = str_to_table;
})

// configuration of the observer:
var config = {
  attributes: true,
  childList: true,
  characterData: true
};
// pass in the target node, as well as the observer options
observer.observe(target, config);

var selected_option = $('#RECIPE').children("option:selected").val()
console.log(selected_option)

$("#RECIPE").bind("change", function(event, ui) {
  var publisher = $("#RECIPE").val();
  if (publisher === "MEAN") {
    document.getElementById("droppable_agg").innerHTML = "";
    $("#droppable_agg").append($("<div><div><div class='form-group drop_area'><label class='control-label' for='mean_recipe'>MEAN</label><button class='delete'>Delete</button></div></div></div><div><div><div class='form-group drop_area'><label class='control-label' for='freq_recipe'>FREQ</label><button class='delete'>Delete</button></div></div></div>"));
  } else {
    document.getElementById("droppable_agg").innerHTML = "";
  }
});
.wrapper {
  width: 1000px;
  clear: both;
}

.left {
  width: 50px;
  float: left;
  margin-right: 10px;
}

.left-drop {
  width: 400px;
  float: left;
}

.right-drop {
  width: 400px;
  float: left;
}

.right {
  width: 50px;
  float: left;
  margin-left: 10px;
}

#agg_output {
  width: 200px;
  float: left;
  margin-left: 10px;
  color: green;
}

#sortable_agg,
#sortable1,
#blocks,
#block {
  list-style-type: none;
  margin: 0;
  padding-bottom: 2px;
}

.droppable_blocks li {
  padding-top: 3px;
  padding-bottom: 7px;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  list-style-type: none;
  padding-bottom: 2px;
}

#sortable_agg li,
#blocks li,
#block li,
.droppable_blocks li {
  border: 1px solid lightgray;
  margin-bottom: 2px;
}

#sortable_agg:hover,
#blocks li:hover {
  cursor: grab;
}

#sortable_agg .ui-sortable-helper:hover,
#blocks .ui-sortable-helper:hover {
  background-color: #ddd;
  border-color: black;
}

#sortable_agg .ui-sortable-helper:hover,
#blocks .ui-sortable-helper:hover {
  cursor: grabbing;
}

.droppable_agg {
  border: 2px dashed #466683;
  padding: 1em;
  min-height: 200px;
}

#droppable_agg.ui-droppable-hover {
  background: #bad4ed;
}

#droppable_blocks.ui-droppable-hover {
  background: #bad4ed;
}

#droppable_agg select {
  margin: 5px;
}

.drop_area {
  border: 1px solid lightgray;
  padding: 3px;
  margin-bottom: 3px;
  width: 100%;
  height: 35px;
}

.delete {
  background: none;
  border: 0px;
  color: #888;
  font-size: 15px;
  width: 60px;
  margin: 0px 0 0;
  font-family: Lato, sans-serif;
  cursor: pointer;
  float: right;
  display: inline-block;
}

button:hover {
  color: #CF2323;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<select id="RECIPE">
  <option id="none">NONE</option>
  <option id="mean">MEAN</option>
</select>

<div class="wrapper">
 
  <div class="right-drop" id="d_agg">
    Drop Here
    <ul id="droppable_agg" class="ui-sortable-helper sortTxtbox droppable_agg">
    </ul>
  </div>

  <div class="right">
    Stats
    <br>
    <br>
    <ul id="sortable_agg">
      <li class="ui-state-default agg" id="ttest">T-Test</li>
      <li class="ui-state-default agg" id="chg">CHG</li>
      <li class="agg" id="mean">Mean</li>
      <li class="agg" id="freq">Freq</li>
    </ul>
  </div>
  
  <div id="agg_output"></div>
</div>

Еще раз спасибо за любую помощь - если полезный код также здесь

(https://codepen.io/mayagans/pen/RwNeezw)

...