javascript - Drag-and-drop from div with scrollbars - overflow-y scroll VS overflow-x visible -

-

i've set jquery drag-and-drop div div , works fine.

however, source div exceeds screen's height needed add vertical scrollbar it. here's run trouble infamous overflow-y issue.

the div needs have overflow-x: visible in order dragged elements visible moved target div. but, when add overflow-y: scroll or overflow-y: auto source div, overflow-x doesn't work anymore.

i have been w3 , few stackoverflow questions, , realise not bug intended behavior (although why intended beyond me). however, haven't found solution works me.

i've tried adding wrapper div source div answers suggested, , doing following:

.wrapper {     width: 100px;     position: absolute;     top: 4vw;     left: 0;     bottom: 4vw;     overflow-y: auto; }  .source {     position: relative;     overflow: visible;     z-index: 2; }  <div class="wrapper">     <div class="source">         <!-- draggable elements go here -->     </div> </div>  <div class="target">     <!-- draggable elements drop here --> </div>

but, despite source div's overflow being ok now, wrapper still hides horizontal overflow. suppose increase width of wrapper full screen , make background invisible , make else on screen have higher z-index in order not behind wrapper, seems ridiculously bad solution such simple issue.

can me here?

if css solution isn't practical, can offer piece of javascript might resolve problem?

code sample: jsfiddle

please check following. if want drag elements , "drop" them on battle positions, may want use helper: "clone" in combination appendto: "body" or other selector items dropped. i've added containment: 'window' , scroll: false (not sure if last 1 want).

function make_draggable(elem){     $(elem).draggable({         revert: "invalid",         cursor: "move",         helper: 'clone',         appendto: 'body',                     containment: 'window',         scroll: false,     }); }

there's been few css fixes styles still apply on draggable clones , body covers full area (since child positionated absolute, need force body cover full height/width)

https://jsfiddle.net/9ush466w/6/

edit: adding custom class , removing on original element can show feedback user. https://jsfiddle.net/9ush466w/8/


Comments

Post a Comment

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

-
i trying work entity inside request method of spring boot application. entity in project , pom.xml has dependencies it. why error message?: org.hibernate.unknownentitytypeexception: unable locate persister: com.ric.bill.model.bs.par package com.ric.web; import java.util.concurrent.atomic.atomiclong; import javax.persistence.entitymanager; import javax.persistence.persistencecontext; import net.sf.ehcache.cachemanager; import net.sf.ehcache.management.cache; import net.sf.ehcache.management.cachestatistics; import org.hibernate.stat.statistics; import org.springframework.beans.factory.annotation.autowired; import org.springframework.boot.autoconfigure.domain.entityscan; import org.springframework.cache.annotation.enablecaching; import org.springframework.transaction.annotation.enabletransactionmanagement; import org.springframework.transaction.annotation.propagation; import org.springframework.transaction.annotation.transactional; import org.springframework.web.bind.annotati
Read more

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

-
i implementing go program uses bufio.scanner , bufio.writer have packaged code follows package main import ( "fmt" "player/command" "strings" ) func main() { //enter code here. read input stdin. print output stdout commands.scanner.scan() { //scan new line , send comand variable check command exist or not input := strings.split(strings.trim(commands.scanner.text(), " "), " ") command := input[0] if command == "" { fmt.printf("$ %s:", commands.pwd) continue } if !commands.commands[command] { commands.throwerror("cannot recognize input.") } else { commands.execute(command, input[1:], nil) } fmt.printf("$ %s:", commands.pwd) } } i using init.go file in main package follows package main import ( "flag" "player/sourc
Read more

c - double free or corruption (fasttop) -

-
this code reads null terminated string file (file containing null terminated strings & should provide index wanted string). error: *** error in `./main': double free or corruption (fasttop): 0x090a4a80 *** aborted code: char *tmp_realloc=null; char *sstring=null; int i=1; /*set file pointer point string*/ fseek(fh,index,seek_set); sstring=(char*)malloc(sizeof(char)); if(sstring == null) return null; tmp_realloc=sstring; while( (*(sstring+i-1)=(char)fgetc((file*)fh)) != 0x0 ) { /*reallocate more memory*/ tmp_realloc=(char*)realloc((char*)sstring,++i); /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strcpy((char*)tmp_realloc,(char*)sstring); free(sstring); sstring=tmp_realloc; } } could tell me pointer causing issue (& reason) ? remove part /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strc
Read more