Как определить, к какому аккордеону добавляется элемент, чтобы элемент списка можно было добавить к соответствующему элементу - PullRequest
Новая
       39

Как определить, к какому аккордеону добавляется элемент, чтобы элемент списка можно было добавить к соответствующему элементу

0 голосов
/ 11 октября 2019

Как создать сортируемый список клонов элементов на панели расширения

my jsfiddle https://jsfiddle.net/jananiSridhar/kmexbqhy/56/

html
<div class="building-blocks">

        <ul id="sortable1" class="drag-list" *ngFor="let type of types">

        <li id="{{ type}}" class="ui-state-default" data-value="Env"  >{{ type}}</li>
        </ul>

</div>

<div class="droparea">

  <div id="accordion">
    <div class=" droppable-column ui-droppable">

    </div>
  </div>
</div>
<!-- <div> -->
                                            <!-- <img class="img-size" style=" -->

    <!-- padding-left: 1%; -->
<!-- "src="../../assets/images/delete.png" > -->
    <div class="row" id="draglist">                                     <!-- </div> -->
 <div class="col-xs-4 draggable-column">
        <ul class="">
            <li class="draggable">test
                <!-- <a href="#" class="close-list-item"> -->
                    <!-- <i class="fa fa-window-close"></i> -->
                <!-- </a> -->
            </li>
            <li class="draggable">2 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable">3 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable">4 Drag me onto item (X)

            </li>
            <li class="draggable">5 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
        </ul>
    </div></div>

Машинопись 

import { Component, OnInit,Injectable,Inject } from '@angular/core';
import { ElementRef, ViewChild} from '@angular/core';
import { AppService } from '../../app.service';
import { Router } from '@angular/router';
 import * as $ from 'jquery';
// import * from 'jqueryui';
 declare let $: any;
@Component({
  selector: 'app-myworkflow',
  templateUrl: './myworkflow.component.html',
  styleUrls: ['./myworkflow.component.css'],
  providers: [AppService],
})
export class MyworkflowComponent implements OnInit {
    Workflow_container_items = new Map(); 
    types = [
        'DEV',
        'UAT',


    ];
    current_env:string='';
  constructor() { }

  ngOnInit() {

      var envcheck ='';
      $(document).ready(function() {
var self=this;


    $(".drag-list li").draggable({
        helper: "clone"
    });

   $(".droparea").droppable ({

        drop: function(event, ui) {
            console.log(ui.draggable.html());
            alert(ui.draggable.html());
             envcheck = $("#"+ui.draggable.html()).data('value');
            console.log(ui.draggable.html());           
            if (envcheck == "Env") {

        addCategory(ui.draggable.html());
        $('.addenv').on('click', setenv);
        $("#accordion").accordion({
          collapsible: true,
          header: 'h3',

        });
      } else {        
        $('.addenv').on('click', setenv);
        //console.log(this.current_env);
        addList(ui.draggable.html());
            }

        },

    });

});
$(".sortable").sortable({
     revert: true,
     connectWith: ".draggable"
 });
$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "true",
    placeholder: "droppable-placeholder"
});
$(".sortable").draggable({
    connectWith: ".draggable"
});
  }

    function Category(item) {
        //$('.abc').on('click',setenv);
     var category = $("<h3 id='envheader' class='addenv' (click)='setenv()'   ><a href='#'>" + item + "</a> </h3> \
              <div class='droppable-item'> <ul id='"+item+"' class='sortable ui-sortable ui-draggable ui-draggable-handle' style='position: relative;'> </ul></div>");

/* $('.DEV').on('click',setenv);
$('.UAT').on('click',setenv); */
    return category;
}

function addCategory(item) {
    var self=this;
    var category = Category(item);
    //$('.abc').on('click',setenv);
    $('#accordion').append(category);
     $('.addenv').on('click', setenv);
    // setenvinit(item)
     //{
    //alert("hi");
    //setenv();

//}
//);
    if($("#accordion").is(':ui-accordion')) {
                  $("#accordion").accordion('destroy').accordion({
                    collapsible: true,
                    header: 'h3'
                    }).sortable({
        items: '.s_panel'
    });
    }
    //$('.abc').on('click',setenv);

}


 function addList(item) {
     var self=this;
  var listItem = ListItem(item);
  //console.log(this.current_env);
 // var active = $( "#accordion" ).accordion( "option", "active" );
 // var text1 = $("#accordion h3").eq(active).text();
 //alert(ui.newPanel.attr('id'));

  $('#'+env +'.sortable').append(listItem);
  //console.log("this.current_env,item",this.current_env,item);
  //this.setWorkflowTaskList(this.current_env,item);
 };

 function ListItem (item) {
  var category = $(" <li>" + item +"</li>");

  $(".draggable").draggable({
    connectToSortable: ".draggable",

    revert: "true",
    placeholder: "droppable-placeholder",
    helper: "clone",
    // stop: this.makeSortable()
  }).disableSelection();
$(".sortable").sortable({
     revert: true,
     connectWith: ".draggable"
 });
  return category;
};

//$("ul, li").disableSelection();

 //makeSortable() {
  //$(".sortable").sortable({
  //  connectWith: ".draggable"
  //}).disableSelection();
//}
function setenvinit(env)
{
    this.current_env=env;
}

function setenv(item) {
     //setenv = function(item){
  this.current_env=item.currentTarget.innerText;
  console.log("this.current_env setenv",this.current_env);
  alert(item.currentTarget.innerText);
 };

css 

div.building-blocks {
    width: 270px;
    height: 539px;
}

div.droparea {
    height: 800px;
    left: 50%;
    position: absolute;
    top: 10%;
    width: 500px;
       border: 2px solid grey;
}

ul.drag-list {
    position: relative;
    cursor: move;
}

/*ul.drop-list {
    border: 2px solid grey;
    height: 600px;
}*/

#sortable1 li {
    height: 30px;
    list-style: none;
    margin-bottom: 5px;
    text-align: center;
}
#draglist ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;
}

#draglist li {
    margin: 0.5em;
    padding: 0.5em;
    width: 200px;
    border: 1px solid black;
}

.draggable-column {
    height: 100%;
}

.droppable-item {
    border: 1px solid black;
    padding: 0.5em;
    float: left;
    align-content: space-between;
}

.sortable {
    width: 230px;
    height: 10em;
    overflow: auto;
    border: 1px solid black;
    background-color: lightgrey;
}

.droppable-placeholder {
    background-color: yellow;
}

.row {
    display: flex;
    /* equal height of the children*/
}

.col {
    flex: 1;
    /* additionally, equal width */
    padding: 1em;
    border: solid;
}

Я следил за этими сайтами jQuery UI Draggable Clone http://jsfiddle.net/ZXYrx/

Я могу создать аккордеон для перетаскивания, и элементы списка попадают в аккордеон. Но это добавляется только к последней выпавшей версии. Как определить активный аккордеон, чтобы в него можно было поместить элемент списка.

...