JQuery drag and drop - clone wouldnt append

Yii 2.0 General Discussions
1

After dragging, clone object gets dragged but it wouldn’t snap to the drop container.

use yii\jui\Draggable;

use yii\jui\Droppable;

…

Draggable::begin([

'options'=>['class'=>'drag-obj',


],


'clientOptions' => [


'revert'=>'invalid',


'cursor'=> 'move',


'helper'=>'clone',],]);

echo ‘Draggable contents here…’;

Draggable::end();

Droppable::begin([

'clientOptions' => ['accept'=>'.draggable',


'drop'=>'js:function(event, ui){var element = $(ui.draggable).clone();$(this).append(element);}'],

‘options’=>[‘class’=>‘drop-obj’,

],

]);

echo ‘Droppable body here…’;

Droppable::end();

2

Something amiss here!

Basic routine like this seem not working with yii2 droppable jui.

Draggable::begin([

	'options'=>[


	'class'=>'drag-obj', 


		'id'=>'drag1',


 		],


]);

echo ‘Draggable contents here…’;

Draggable::end();

Droppable::begin([

	'clientOptions' => [


	'accept'=>'.draggable',


		'drop'=>'js:function(event, ui){$(this).html("Dropped!"};'


],


	'options'=>[


		'class'=>'drop-obj',


		'id'=>'canvas1',


		], 


]);

echo ‘Droppable body here…’;

Droppable::end();

Any thoughts?

Thank you.

3

look at the code that the widget is generating in developer tools in chrome

jQuery(document).ready(function () {

jQuery(’#drag1’).draggable();

jQuery(’#canvas1’).droppable({“drop”:" function( event, ui ) {\r\n $( this )\r\n .addClass( \u0022ui-state-highlight\u0022 )\r\n .find( \u0022p\u0022 )\r\n .html( \u0022Dropped!\u0022 );\r\n }"});

});

it is putting all the array keys and values in quotes! It is also adding white space characters to the string. This widget is definitely broken

a work around would be to hard code what you want each draggable and droppable to do :( kinda defeats the purpose of the widget though

it would look like

<script>

jQuery(document).ready(function () {

jQuery(’#drag1’).draggable();

jQuery(’#canvas1’).droppable({drop: function( event, ui ) {$( this ).addClass(“ui-state-highlight”).find(“p”) .html(“Dropped!”);

}});

});

</script>

4

here is how you can just register jquery UI in the app assets and just write the java script

/**

*/

class AppAsset extends AssetBundle

{

public &#036;basePath = '@webroot';


public &#036;baseUrl = '@web';


public &#036;css = [


    'css/site.css',


    '/js/jqueryui/jquery-ui.min.css'


];


public &#036;js = [


    '/js/jqueryui/external/jquery/jquery.js',


    '/js/jqueryui/jquery-ui.min.js'


];


public &#036;depends = [


    'yii&#092;web&#092;YiiAsset',


    'yii&#092;bootstrap&#092;BootstrapAsset',


];

}

in your view

<?php

use app\assets\AppAsset;

AppAsset::register($this);

?>

<style>

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }

#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

</style>

<script>

setTimeout(function(){

  &#036;( function() {


        &#036;( &quot;#draggable&quot; ).draggable();


        


        &#036;( &quot;#droppable&quot; ).droppable({


          drop: function( event, ui ) {


            &#036;( this )


              .addClass( &quot;ui-state-highlight&quot; )


              .find( &quot;p&quot; )


                .html( &quot;Dropped&#33;&quot; );


          }


        });


  } );

},500);

</script>

</head>

<body>

<div id="draggable" class="ui-widget-content">

<p>Drag me to my target</p>

</div>

<div id="droppable" class="ui-widget-header">

<p>Drop here</p>

</div>

</body>

</html>