динамически добавлять элемент после удаления его из списка меню - PullRequest
Новая
       32

динамически добавлять элемент после удаления его из списка меню

0 голосов
/ 31 мая 2018

https://jsfiddle.net/UdayKumar/rm5ey912/2/

Я скопировал рабочую демонстрацию.

При перетаскивании элементов слева и падении с правой стороны.Div должен динамически изменять ширину и высоту.При добавлении различных элементов я хочу динамически добавлять элементы, такие как переключатели, флажки, текстовое поле и т. Д. Может ли кто-нибудь помочь мне с этим ?? 

<!doctype html>
<head>
<title>Form Builder</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
<script src="jQuery.min.js"></script>
<script src="jQuery.ui.js" type="text/javascript"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div id="Title"> <img src="" width="200" height="70" ></div>
    <div id="listOfItems">  
        <div id="Heading" class="block">Heading
            <div class="close">X</div>
        </div>      

        <div id="txtbox" class="block">Text Box
            <div class="close">X</div>
        </div>

        <div id="txtfield" class="block">Text Field
            <div class="close">X</div>
        </div>

        <div id="RB1" class="block">Radio Button-1
            <div class="close">X</div>
        </div>  

    </div>

    <div id="Container" >

    </div>

</body>
</html>


$('#Container').sortable({
helper: 'clone'
});
$('.block').draggable({
  helper: 'clone',
  connectToSortable: '#Container'   
});


#Container{
    position:absolute;
    width:1024px;
    height:508px;
    left:300px;
    top:100px;
    overflow: auto;
    border:1px solid;
    box-shadow:
    0 0 0 3px hsl(0, 0%, 50%),
    0 0 0 5px hsl(0, 0%, 60%);
}

#Title{
    position:absolute;
    font-family: sans-serif; 
    font-size:30px;
    width:1024px;
    left:150px;
    color:Red;
    text-align:center;
    height:100px;


}

.block{
    position:relative;
    width:100px;
    height:50px;
    left:0px;
    top:50px;
    margin-bottom:2px;
    border:1px solid;

}

.block1{
    position:relative;
    width:200px;
    height:50px;
    left:0px;
    top:50px;
    background-color:green;
    margin-bottom:2px;
    border:1px solid;

}

#Heading{
background-color:red;

}


#listOfItems{
    position:absolute;
    top:100px;
    width:250px;
    height:500px;
    border:1px solid;
    overflow:hidden;
    border-style: doubled;
    box-shadow:
    0 0 0 3px hsl(0, 0%, 50%),
    0 0 0 5px hsl(0, 0%, 60%);

}

.close{

    position: relative;
    height: 15px;
    width: 12px;
    left: 976px;
    border: 1px solid red;
    display:none;
}

.block:hover .close{

    display:block;
}

1 Ответ

0 голосов
/ 31 мая 2018

Итак, мне удалось сделать более простую рабочую модель того, что вам нужно, из предоставленного вами кода.Указанная вами скрипка не работала из-за того, что включенный jQuery-ui был неправильным.

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

    $('#Container').sortable({
    helper: 'clone',
    receive : function(event,ui){
      var block_id = ui.item.attr('id');
      var html='<div class="close">X</div>';
      if(block_id == 'Heading'){
        html+= '<h1>Sample Heading</h1>';
      }else if(block_id == 'txtbox'){
         html+= '<input type="text" name="txt_name" placeholder="your text here">';
      }else if(block_id == 'txtfield'){
         html+= '<textarea name="textarea_name" cols="40" rows="6"></textarea>';
      }else if(block_id == 'RB1'){
         html+= '<input type="radio" name="radio_name" value="option1">Option1<input type="radio" name="radio_name" value="option2">Option2';
      }
     ui.helper.removeAttr('style').addClass('new_element_class').html(html);
     }
});

$('.block').draggable({
  helper: 'clone',
  connectToSortable: '#Container'
});

$('.close').live("click", function(){
    $(this).parent().hide();
});

Вот рабочая скрипка .скрипка.Проверьте это

...