html - Jquery drag + drop issue -

-

i have following jsfiddle code (link below) . having problems fixing the items can dragged within white box area.

scenario: user 1 box base , other user boxes should within user 1 white content div. if instance drag user 4 user 2 user 4 should within white content box of user 2 , on. @ moment drag grey part of user 2 box.

any ideas on how setup divs?

i know html setup can't think of how fix

https://jsfiddle.net/euf1s9gc/3/

'use strict'   $(document).ready(function(){  var resp =[{"id":"1","name":"user","title":"1","parentid":"9","base":"1"},   {"id":"2","name":"user","title":"2","parentid":"1","base":"0"}, {"id":"3","name":" user","title":"3","parentid":"1","base":"0"}, {"id":"4","name":"user","title":"4","parentid":"1","base":"0"}];  createlist(resp); setdragdrop();   function createlist(data){  jquery.each(data, function() {      var baseused =false;     if(this.base == 1 && baseused ==false){          //problem in setup  of html         $('.containers').append("<div class='popup' id='parentid_"+this.id+"'><div class='header'>"+this.name+" ("+this.title+")</div><div class='content'></div></div>");          baseused = true;//to stop replication      }else{          $('#parentid_'+this.parentid).append("<div id='parentid_"+this.id+"' class='popup'><div class='header'>"+this.name+" ("+this.title+")</div><div class='content'></div></div>");     }  });  }  function setdragdrop(){       $('.containers .popup').droppable({         activeclass: "ui-state-default",         hoverclass: "ui-state-hover",       //  accept: '.object',         out: function() {             $( ).droppable( "option", "disabled", false );          },         drop: function(event, ui) {              var targetid = this.id;             var userid = (ui.draggable).get(0).id;              $(ui.draggable).addclass("insidepopup");             ui.draggable.detach().appendto($(this));         }     });       $('.popup').draggable({         helper: 'clone',         containment:"parent"     }); } });

i have managed fix droppable part, drops within .content need figure out setup part.

code modified $('.containers .popup .content').droppable({


Comments

Post a Comment

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

-
i've error when launch playbook don't found why.... error! field 'hosts' required not set there main.yml : --- - hosts: hosts - vars: - elasticsearch_java_home: /usr/lib/jmv/jre-1.7.0 - elasticsearch_http_port: 8443 - tasks: - include: tasks/main.yml - handlers: - include: handlers/main.yml and /etc/ansible/hosts : [hosts] 10.23.108.182 10.23.108.183 10.23.108.184 10.23.108.185 when test ping, : [root@poste08-08-00 elasticsearch]# ansible hosts -m ping 10.23.108.183 | success => { "changed": false, "ping": "pong" } 10.23.108.182 | success => { "changed": false, "ping": "pong" } 10.23.108.185 | success => { "changed": false, "ping": "pong" } 10.23.108.184 | success => { "changed": false, "ping": "pong" } please, me :) regards, you have syntax error in playbook.
Read more

customize file_field button ruby on rails -

-
i'm trying rid of ugly button rails has default file upload. want add glyphicon <%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %> this didn't work , have tried other things in different post saw on page, don't attach file. as suggested here bootstrap filestyle , can use bootstrap's filestyle style file upload buttons. step-1: add layout application.html.erb i have added bootstrap filestyle library cdn. should make sure have both jquery , boostrap loaded. <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script> step-2: add corresponding js file: $(":file").filestyle({input: false}); step-3: image_url file field follows: <%= f.file_field :image_url,class: "filestyle", "data-input" => false %>
Read more

SoapUI on windows 10 - high DPI/4K scaling issue -

-
Image
soapui doesn't seem dpi-aware , displays small on high dpi screen (tiny text , buttons). other applications running fine (screen resolution 3840 x 2160). version : soapui 5.1.2 os : windows 10 i have tried: configure soapui run "disable display scaling on high dpi settings" - parts of soapui looking bigger , don't display (image) changing resolution changing font size (preferences > editor settings > select font...) therefore assume, soapui pretends dpi-aware, not scale itself. have same issue? this workaround until developers round making version dpi-aware. step 1: add registry key hkey_local_machine\software\microsoft\windows\currentversion\sidebyside\preferexternalmanifest (dword) 1 step 2: add manifest file 'soapui-5.2.1.exe.manifest' in same directory 'soapui-5.2.1.exe' content of manifest file: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <assembly xml
Read more