Disable property using Draggable jquery UI and javascript

Asked

Viewed 131 times

3

The idea of this code is that after the items are dragged and dropped into the ,they change the disable=true property to disable=false. Someone knows how to do? 

  <style type="text/css"> *{
        margin: 0px;

        border:0px;

    }
    body{
        background-color: rgb(255,255,255);
        font-family: 'Gloria Hallelujah', cursive;
    }

    body>header{
        background-color:#F5F5F5;

        height: 83px;

        box-shadow:1px 1px 5px black;
    }

    #logo img{


        border: 1px solid black;
        box-shadow: 1px 1px 1px black;
    } 


    #logo{ 
        display: inline-block;
        margin-left:80px;
        margin-top: 14px;
    }





    #divBusca{
        background-color:#E0EEEE;
        border:solid 1px black;
        border-radius:10px;
        width:450px;
        height:32px;
        margin-left: 400px;
        margin-top: -48px;
    }

    #txtBusca{
        float:left;
        background-color:transparent;
        padding-left:5px; 
        font-size:18px;
        border:none;
        height:32px;
        width:370px;
    }

    #btnBusca{
        border:none;
        float:right;
        height:32px;
        border-radius:0 7px 7px 0;
        width:70px;
        font-weight:bold;
        background:rgb(240,240,240);
    }

    #construirPerguntas h1 { text-align: center; margin: 0; }
    #construirPerguntas{


        width: 500px;
        height: 500px;
        background-color:rgb(240,240,240);

        margin-top: 50px;
        padding: 5px;


    }

    #componentes{
        display: inline-block;
        margin-left:300px;
        border:2px solid red;
        width: 850px;
        height:100px;

    }
    .formulario{

        border:1px solid red;  


        display:inline-block;


    }


    .draggable,.botaoSubmit,h3 {
        border:1px solid black;
        border-right:3px solid black;
        display: inline-block;}


    form{
        width:700px;
        height: 410px;   }

    #dimensao{

        margin-left:320px;
        margin-top:30px;
        height: 900px; 
        width:900px;
    }

</style>


<section>


    <header>



        <div id="componentes">
            <label >Radio: </label><div  class="draggable" class="ui-widget-content" ><input type="Radio" disabled></div>
            <label>CheckBox: </label><div  class="draggable" class="ui-widget-content"><input type="checkbox"  disabled></div>
            <label>TextArea:</label><div  class="draggable" class="ui-widget-content"> <textarea disabled="true"></textarea></div>     
            <div  class="draggable" class="ui-widget-content"> <span contenteditable>ds</span></div>     


        </div>


    </header>





</section>

<section id="dimensao">

    <div  class="formulario" class="ui-widget-content">
        <form >


            <div class="botaoSubmit" class="ui-widget-content"><input type="submit"></div> 
        </form>


    </div>


</section>




<script>
    $(function () {


        $(".draggable").draggable(
                {
                    helper: "clone", disabled: false

                });

        $(".botaoSubmit").draggable();


        $("form").resizable(
                {
                    animate: true,
                    containment: "#dimensao"
                });

        $(".formulario").droppable({
            accept: ".draggable",
            drop: function (event, ui) {//evento o evento .ui elemento recebido

                var new_signature = $(ui.helper).clone();
                // var new_signature = $(ui.helper).clone();
                new_signature.draggable();//estou dizendo que o clone pode ser arrastado


                ui.draggable.prop("disabled", false);//nao funciona


                $(this).append(new_signature);//estou add o elemnto
                $(ui.helper).remove();//removendo para não criar clones.
            }
        });

    });

</script>

javascript jquery

  • This drag is cloning the div?

  • yes!! the div contains the elements that will be dragged.Textarea,buton.If you rotate the code ,you will notice that I put a red border on the elements ,this border is the div, to drag the elements you have to click on the border of the div

1 answer

0


As commented, the solution is to add new_signature.draggable().children().attr('disabled',false); in the drop::

$(function () {
  $(".draggable").draggable(
  {
    helper: "clone", disabled: false
  });

  $(".botaoSubmit").draggable();

  $("form").resizable(
  {
    animate: true,
    containment: "#dimensao"
  });

  $(".formulario").droppable({
    accept: ".draggable",
    drop: function (event, ui) {//evento o evento .ui elemento recebido

      var new_signature = $(ui.helper).clone();
      // var new_signature = $(ui.helper).clone();
      new_signature.draggable().children().attr('disabled',false);
      new_signature.draggable();//estou dizendo que o clone pode ser arrastado

      //			ui.draggable.prop("disabled", false);//nao funciona

      $(this).append(new_signature);//estou add o elemnto
      $(ui.helper).remove();//removendo para não criar clones.
    }
  });
});
body{
  background-color: rgb(255,255,255);
  font-family: 'Gloria Hallelujah', cursive;
}

body>header{
  background-color:#F5F5F5;
  height: 83px;
  box-shadow:1px 1px 5px black;
}

#logo img{
  border: 1px solid black;
  box-shadow: 1px 1px 1px black;
} 

#logo{ 
  display: inline-block;
  margin-left:80px;
  margin-top: 14px;
}

#divBusca{
  background-color:#E0EEEE;
  border:solid 1px black;
  border-radius:10px;
  width:450px;
  height:32px;
  margin-left: 400px;
  margin-top: -48px;
}

#txtBusca{
  float:left;
  background-color:transparent;
  padding-left:5px; 
  font-size:18px;
  border:none;
  height:32px;
  width:370px;
}

#btnBusca{
  border:none;
  float:right;
  height:32px;
  border-radius:0 7px 7px 0;
  width:70px;
  font-weight:bold;
  background:rgb(240,240,240);
}

#construirPerguntas h1{
  text-align: center; margin: 0;
}

#construirPerguntas{
  width: 500px;
  height: 500px;
  background-color:rgb(240,240,240);
  margin-top: 50px;
  padding: 5px;
}

#componentes{
  display: inline-block;
  margin-left:300px;
  border:2px solid red;
  width: 850px;
  height:100px;
}

.formulario{
  border:1px solid red;  
  display:inline-block;
}

.draggable,.botaoSubmit,h3 {
  border:1px solid black;
  border-right:3px solid black;
  display: inline-block;
}

form{
  width:700px;
  height: 410px;
}

#dimensao{
  margin-left:320px;
  margin-top:30px;
  height: 900px; 
  width:900px;
}
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<section>
  <header>
    <div id="componentes">
      <label >Radio: </label><div  class="draggable" class="ui-widget-content" ><input type="Radio" disabled></div>
      <label>CheckBox: </label><div  class="draggable" class="ui-widget-content"><input type="checkbox"  disabled></div>
      <label>TextArea:</label><div  class="draggable" class="ui-widget-content"> <textarea disabled="true"></textarea></div>     
      <div class="draggable" class="ui-widget-content"> <span contenteditable>ds</span></div>     
    </div>
  </header>
</section>

<section id="dimensao">
  <div class="formulario" class="ui-widget-content">
    <form>
      <div class="botaoSubmit" class="ui-widget-content"><input type="submit"></div> 
    </form>
  </div>
</section>

  • really disabled turned false. However, I wanted only clones to look like this.The way the original tmb component looks is false

  • @Thiago I’ll change.. only 1 min...

  • @Thiago Take a look now.

  • Thanks worked out!!!! Thank you very much!!! Solution was good!!

  • It’s a part of my TCC!! here in college where I study teachers do not understand the technologies for the web!! pity!!!

  • @Thiago rs... good that helped!

  • Hello my friend ! Moving the code I got a way where I don’t use the mouse event the way you did.Thanks again for fixing the problem! if it hadn’t you wouldn’t have come up with a new solution. Solution: new_signature.draggable(). Children(). attr('disabled',false);

  • @Thiago Mt legal.

Show 3 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.